问题描述
现有这样的jquery click事件：$(document).ready(function() { $curtainopen = false; $(".rightcurtain").click(function(){ $(this).blur(); if ($curtainopen == false){ $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); $(".rightcurtain").stop().animate({width:'60px'}, 5000 ); //这里的“60px”现在是固定值$curtainopen = true; }else{$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); $(".rightcurtain").stop().animate({width:'82%'}, 5000 );//这里的“82%”现在是固定值$curtainopen = false; } return false; }); });//asker:www.yuanshi88.com现在有不同的rightcurtain层，都需要调用这个click事件，但上面的60px和82%不是固定的。而是根据不同的层传递不同的参数，请问要怎么写？
解决方案
<!DOCTYPE HTML><html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="jquery.js"></script><style>.rightcurtain{border: 1px solid black;}</style></head><script type="text/javascript">$(function(){$curtainopen = false; $(".rightcurtain").click(function(){ $(this).blur(); if ($curtainopen == false){ $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'swing'}); $(".rightcurtain").stop().animate({width:$(this).attr('data-width-on')}, 5000 ); //这里的“60px”现在是固定值 $curtainopen = true; }else{ $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'swing'}); $(".rightcurtain").stop().animate({width:$(this).attr('data-width-off')}, 5000 );//这里的“82%”现在是固定值 $curtainopen = false; } return false; }); });</script><body><div class="rightcurtain" data-width-on="60px">1</div><div class="rightcurtain" data-width-off="82%">2</div></body></html>
解决方案二：
蛋疼得很，老发错code。。不能修改不给力啊。。<!DOCTYPE HTML><html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="jquery.js"></script><style>.rightcurtain{border: 1px solid black;}</style></head><script type="text/javascript">$(function(){$curtainopen = false; $(".rightcurtain").click(function(){ $(this).blur(); if ($curtainopen == false){ $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'swing'}); $(".rightcurtain").stop().animate({width:$(this).attr('data-width-on')}, 5000 ); //这里的“60px”现在是固定值 $curtainopen = true; }else{ $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'swing'}); $(".rightcurtain").stop().animate({width:$(this).attr('data-width-off')}, 5000 );//这里的“82%”现在是固定值 $curtainopen = false; } return false; }); });</script><body><div class="rightcurtain" data-width-on="60px" data-width-off="82%">1</div><div class="rightcurtain" data-width-on="100px" data-width-off="50%">2</div></body></html>
解决方案三：
这里提供一个思路，给每个rightcurtain层绑定一些数据，click处理函数里面再取出来。<!DOCTYPE HTML><html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="jquery.js"></script><style>.rightcurtain{border: 1px solid black;}</style></head><script type="text/javascript">$(function(){$curtainopen = false; $(".rightcurtain").click(function(){ $(this).blur(); if ($curtainopen == false){ alert(1);$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'swing'}); $(".rightcurtain").stop().animate({width:$(this).attr('data-width-on')}, 5000 ); //这里的“60px”现在是固定值 $curtainopen = true; }else{ console.log(21);$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'swing'}); console.log(22);$(".rightcurtain").stop().animate({width:$(this).attr('data-width-off')}, 5000 );//这里的“82%”现在是固定值 console.log(23);$curtainopen = false; } return false; }); });</script><body><div class="rightcurtain" data-width-on="60px" data-width-off="82%">1</div><div class="rightcurtain" data-width-on="100px" data-width-off="50%">2</div></body></html>
解决方案四：
function(参数){ if(参数){}else{}}