添加和删​​除类

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

使用toggleClass（）

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

（请滚动到页面底部.toggle（）和删除类方法用示例描述，还有一个工作演示）