脚本执行中的意外顺序

时间:2012-12-22 01:36:43

标签: javascript jquery

为什么它会运行第二个脚本?如何让它像切换控件一样工作?

<script>
    var el = 2;

    $(document).ready(function(){
        $(".rightDiv").click(function(){
            if (el == 2) {
                $(this).animate({left:'150px'});
                el = 1;
            }
        });
    });
</script>

<script>

    $(document).ready(function(){
        $(".rightDiv").click(function(){
            if (el==1) {
                $(this).animate({left:'50px'});
                el = 2;
            }
        });
    });
</script>

4 个答案:

答案 0 :(得分:1)

您只需要一个.ready()

$(document).ready(function()
{ 
  var el = false; 
  var rightDivs = $('.rightDiv');
  $(rightDivs).click(function(){ 
      if (el == false) 
      { 
        $(this).animate({left:'150px'}); 
        el = true; 
      }
      else if (el == true)
      {
         $(this).animate({left:'50px'}); 
        el = false;
      }
    }); 
}); 

答案 1 :(得分:0)

这应该适合你:

var el = false;
$(document).ready(function() {
    $(".rightDiv").click(function() {
        $(this).stop(true).animate({left: (el ? 50 : 150) + 'px'});
        el = !el;
    });
});​

jsfiddle with example

答案 2 :(得分:0)

您已经参加了两个事件处理程序,因此当事件发生时,它将运行一个,然后运行另一个。

由于第一个将更改变量以使第二个中的条件成立,因此两个if语句中的代码都将运行。

将代码放在同一个事件处理程序中,以便您可以使用else只运行其中一个:

<script>
  $(document).ready(function(){

    var el = 2;

    $(".rightDiv").click(function(){
      if (el == 2) {
        $(this).animate({left:'150px'});
        el = 1;
      } else {
        $(this).animate({left:'50px'});
        el = 2;
      }
    });

  });
</script>

答案 3 :(得分:0)

here's @ h2ooooooo的答案略有改进,我们抛弃了全局范围变量并使用了元素的属性。

基本上我们在这里做的是通过使用全局变量防止膨胀全局范围,现在我们正在使用与被按下的元素直接相关的数据。

$(document).ready(function() {
    $(".rightDiv").attr("isLeft",1).click(function() {
        var pos = "50";
        if( $(this).attr("isLeft") == "1" ){
            pos = "150";
            $(this).attr("isLeft",0)
        }else{
            $(this).attr("isLeft",1);
        }
        $(this).stop(true).animate({left: pos + 'px'});
    });
});