jquery - クリックイベントで :not セレクターを使用するには?

Question

最初に私はこのように試しました：

$('.choose-car li:not(.selected)').click(function () {
    console.log('works and with selected');
    $(this).addClass('selected');
});

それから私は少し考えて、次のようにしてみました：

$('.choose-car li:not(.selected)').on('click', function () {
    console.log('works and with selected');
    $(this).addClass('selected');
});

どちらも選択したもので動作します..

しかし、最初のクリック後にクリックイベントを削除する必要があるのではないかと考えていますか、それとももっと簡単な解決策がありますか? 多分私は何かを逃していますか？

Answer 1

selectedハンドラーを登録した後、コードはクラスを追加しています。selectedハンドラーは、クラスを取得した後でも要素にバインドされたままになるため、これはおそらくあなたが望むものではありません。

代わりにイベントを委任してみてください。

$(".choose-car").on("click", "li:not(.selected)", function() {
    $(this).addClass("selected");
});

Answer 2

$( ".choose-car" ).on( "click", "li", function(){
    if( $(this).hasClass("selected") ) {
        return;
    }

     $(this).addClass('selected');
});

Answer 3

if($(this).hasClass('selected')){
$(this).removeClass('selected')
}
else{
$(this).addClass('selected')
}