0

2 番目のスクリプトを実行する理由と、トグル コントロールのように機能させるにはどうすればよいですか?

<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

4 に答える 4

1

必要な .ready() は 1 つだけです

$(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;
      }
    }); 
}); 
于 2012-12-22T02:02:59.987 に答える
0

これはあなたにとってうまくいくはずです:

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

例のあるjsfiddle

于 2012-12-22T01:45:51.687 に答える
0

2 つのイベント ハンドラーをアタッチしたので、イベントが発生すると、1 つが実行され、次にもう 1 つが実行されます。

最初のステートメントが変数を変更して、2 番目のステートメントの条件が true になるようにすると、両方のifステートメント内のコードが実行されます。

コードを同じイベント ハンドラーに配置して、elseそのうちの 1 つだけを実行するために使用できるようにします。

<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>
于 2012-12-22T01:53:33.507 に答える
0

これは、@ 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'});
    });
});
于 2012-12-22T02:06:07.450 に答える