1

HTML:

<ul>
   <li class='selectable'>Data</li>
   <li class='deselectable'>Data</li>
</ul>

Javascript

$(".selectable").click(function()
{
    alert("select "+$(this).prop("class"));
    //data
    $(this).removeClass('selectable').addClass('deSelectable');
});

$(".deselectable").click(function()
{
    alert("deselect "+$(this).prop("class"));
    //data
    $(this).removeClass('deSelectable').addClass('selectable');
});

このコードは、li 要素を初めてクリックすると正常に動作します。「.selectable」をクリックすると、最初に「select selectable」が表示され、2 回目には「deselect deselectable」ではなく「select deselectable」が表示されます。

同じ 'li' 要素をクリックしたときに、2 つの方法を切り替えるにはどうすればよいですか?

4

5 に答える 5

2

You can do it all in one event binding:

$(".selectable, .deselectable").click(function()
    {
        if ($(this).hasClass('selectable')) {
            alert("select "+$(this).prop("class"));
            //data
            $(this).removeClass('selectable').addClass('deselectable');
        } else {
            alert("deselect "+$(this).prop("class"));
            //data
            $(this).removeClass('deselectable').addClass('selectable');
        }
    }   
);

However if all you want to do is swap the classes then this will work even better:

$(".selectable, .deselectable").click(function() {
    $(this).toggleClass('selectable deselectable');
});
于 2013-07-19T07:39:04.060 に答える
2

clickバインド時にセレクターに一致する要素にのみバインドします。on委任されたイベントで使用したい：

$(document).on('click', '.selectable', function() { ... });
$(document).on('click', '.deselectable', function() { ... });

CSS クラスでは大文字と小文字が区別されることに注意してください。deSelectableありませんdeselectable。

選択可能および選択不可のすべてを含むコンテナーが存在する場合、それは破棄されず、より近くにありdocument、代わりにそれを使用します。

于 2013-07-19T07:36:39.183 に答える
1

これは、1 つの関数、トグル、およびマークアップへの依存なしで実行できます。

var toggle = true;    
$(".selectable,.deselectable").click(function(){
    if(toggle){
       alert("option1");
    }else{
       alert("option2");
    }
    toggle = !toggle;
 });

作業例: http://jsfiddle.net/2qsKp/

于 2013-07-19T07:39:58.080 に答える
0

.toggleClass() 関数で確認しましたかhttp://api.jquery.com/toggleClass/、

デモ

このデモをチェックしてください。これが役立つかもしれません。

$("li").click(function () {
      $(this).toggleClass("selectable");
    });
于 2013-07-19T07:50:04.680 に答える
0 
$(".selectable").click(function()
    {
        if ($(this).hasClass('selectable')) {
            $(this).removeClass('selectable').addClass('deselectable');
        } else
            $(this).removeClass('deselectable').addClass('selectable');
        }
    }   
);
$(".doselectable").click(function()
    {
        if ($(this).hasClass('selectable')) {
            $(this).removeClass('selectable').addClass('deselectable');
        } else
            $(this).removeClass('deselectable').addClass('selectable');
        }
    }   
);
于 2013-07-19T07:59:51.210 に答える