javascript - 添加和删​​除类

Question

我在 jQuery 中更改类时遇到问题。我正在开发一个管理系统，我可以在其中设置项目的打开和关闭状态。我通过显示一个红色和绿色的图标来形象化这一点。因此，带有红色项目的类必须通过单击变为绿色，而绿色必须通过单击变为红色。我的问题是第二次点击班级更改不再起作用。

这是我的html：

<ul id="sections">
   <li class="on">Item</li>
   <li class="on">Item</li>
   <li class="on">Item</li>
   <li class="on">Item</li>
</ul>   

这是我的 jQuery：

$( document ).ready(function(e) {
$("li.on").click(function() {
    $(this).addClass('off').removeClass('on');
});

$("li.off").click(function() {
    $(this).addClass('on').removeClass('off');  
});


});

我的 CSS 样式化了“on”和“off”类。

Answer 1

问题是您根据绑定时具有的类绑定到元素。最初$("li.off")是空的。

采用

$(function(){
    $('#sections')
    .on('click', "li.on", function() {
        $(this).addClass('off').removeClass('on');
    })
    .on('click', "li.off", function() {
        $(this).addClass('on').removeClass('off');  
    });
});

您可能也对toggleClass感兴趣，这将允许您这样做：

$(function(){
    $('#sections').on('click', "li", function() {
        $(this).toggleClass('off on');
    });
});

Answer 2

有一个函数toggleClass可以完全满足您的要求。

这是您需要的所有代码：

$( document ).ready(function(e) {
    $('li.on, li.off').click(function() {
        $(this).toggleClass('on off');
    });
});

我创建了一个小提琴供您自己查看：http: //jsfiddle.net/nHyHd/

Answer 3

你可以使用这个简单而优雅的

$(document).ready(function(e) {
 $('#sections li').click(function() {
    $(this).toggleClass('on off');
 });
});

Answer 4

使用切换类（）

有关演示和代码，请查看http://www.mkyong.com/jquery/jquery-toggleclass-example/

（请滚动到页面底部。toggle() 和删除类方法已通过示例进行描述，并且还有一个工作演示）