Ordre inattendu dans l'exécution du script

Question

Pourquoi exécute-t-il le deuxième script et comment puis-je le faire fonctionner comme un contrôle à bascule?

<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

Cela devrait bien pour vous:

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

jsfiddle with example

Answer 2

Vous avez atteached deux gestionnaires d'événements, de sorte que lorsque l'événement se produit, il courra un, puis l'autre.

Comme le premier va changer la variable pour que la condition dans le second devienne vraie, le code dans les deux instructions if sera exécuté.

Mettez le code dans le même gestionnaire d'événements, de sorte que vous pouvez utiliser else pour exécuter un seul d'entre eux:

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

Answer 3

Vous avez seulement besoin d'un .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 4

here's une version légèrement améliorée de la réponse de @ h2ooooooo, où nous avons abandonné la variable globale scoped et utilisé les attributs de l'élément.

Fondamentalement, ce que nous faisons ici est d'éviter de gonfler la portée globale en utilisant des variables globales et maintenant nous travaillons avec des données directement liées à l'élément qui a été pressé.

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