javascript - 脚本执行中的意外顺序

Question

为什么它运行第二个脚本，我怎样才能让它像一个切换控件一样工作？

<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>

Answer 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;
      }
    }); 
}); 

Answer 2

here's a slightly improved version of @h2ooooooo 's answer, where we ditched the global scoped variable and use element's attributes.

Basically what we are doing here is to prevent bloating the global scope by using global variables and now we are working with data directly related to the element that was pressed.

$(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'});
    });
});

Answer 3

这应该适合您：

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

jsfiddle 与示例

Answer 4

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

由于第一个将更改变量以使第二个中的条件为真，因此两个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>