jqueryを.not（）で選択する

Question

jQueryにいくつか問題があります。 私は.squareクラスを持つDivのセットを持っています。それらのうちの1人だけが.activeクラスを持つことになっています。この.activeクラスは、onClickを有効/無効にすることができます。

は、ここに私のコードです：

jQuery().ready(function() { 
$(".square").not(".active").click(function() { 
    //initialize 
    $('.square').removeClass('active'); 

    //activation 
    $(this).addClass('active'); 

    // some action here... 
}); 

$('.square.active').click(function() { 
    $(this).removeClass('active'); 
}); 
    }); 

私の問題は、私はセレクタが働いていなかったかのように、アクティブ.squareをクリックしても、最初の関数Siは、呼ばれていることです。実際、これはaddClass（ 'active'）行によるものと思われます...

これを修正する方法がありますか？ ありがとう

Answer 1

を。 Lonesomedayは、関数が開始時に何にでもバインドされているという点で正しいです。これは変更されません。

次のコードでは、物事を維持するために、liveのjQueryメソッドを使用しています。 Liveでは、セレクタが参照しているものは常に処理されるため、クラスを変更した場合は常に更新されます。 squareクラスの新しいdivを動的に追加することもできます。自動的にハンドラも作成されます。

$(".square:not(.active)").live('click', function() { 
    $('.square').removeClass('active'); 
    $(this).addClass('active'); 
}); 

$('.square.active').live('click', function() { 
    $(this).removeClass('active'); 
}); 

例の作業：http://jsfiddle.net/jonathon/mxY3Y/

注：私は、これは私がそれを行うだろうかあるとは言わないよ（あなたの条件に厳密に依存します）が、それは、物事を見てちょうど別の方法です。

Answer 2

これは、関数を作成するときにactiveクラスを持たない要素にバインドされているためです。あなたはすべての.square要素に結合し、要素がクラスactive持っているかどうかに応じて異なる行動を取る必要があります。ただ、他の回答は異なる何かを与えるために

$(document).ready(function(){ 
    $('.square').click(function(){ 
     var clicked = $(this); 
     if (clicked.hasClass('active')) { 
      clicked.removeClass('active'); 
     } else { 
      $('.square').removeClass('active'); 
      clicked.addClass('active'); 
     } 
    }); 
});