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

将处理程序添加到两个类

output =
 1     4
 3     1
 2     5
 2     3
 3     1

演示：Fiddle

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类的元素，而不是稍后获取该类的元素。