jQuery添加/刪除類不起作用

Question

我有一些jQuery，用於更改兩個元素的類。 它只工作一次，元素一次更改類，但是我希望它可以互換工作。 因此，當他們單擊時，他們單擊“取消選擇”按鈕將為其分配“選定”類，第二個按鈕將變為“取消選擇”類。 這是jQuery：

$('.network_bar_deselected').on('click', function(){
    $('.network_bar_selected').removeClass('network_bar_selected').addClass('network_bar_deselected');
    $(this).removeClass('network_bar_deselected').addClass('network_bar_selected');
});

HTML非常簡單：

<a href="#"><div class="network_bar_selected"><h4>Network Updates</h4></div></a>
<a href="#"><div class="network_bar_deselected"><h4>Latest Tweets</h4></div></a>

Answer 1

將處理程序添加到兩個類中

$('.network_bar_selected, .network_bar_deselected').on('click', function () {
    $('.network_bar_selected').removeClass('network_bar_selected').addClass('network_bar_deselected');
    $(this).removeClass('network_bar_deselected').addClass('network_bar_selected');
});

演示： 小提琴

Answer 2

由於要動態更改類，因此應使用委托：

$(document).on("click", ".network_bar_deselected", function() {
    $('.network_bar_selected').removeClass('network_bar_selected').addClass('network_bar_deselected');
    $(this).removeClass('network_bar_deselected').addClass('network_bar_selected');
});

原始文檔僅在加載文檔時將處理程序綁定到具有network_bar_selected類的元素，而不綁定至稍后獲得該類的元素。