Question

我是jquery的新手，并且在下面的代码中遇到了一些问题，代码试图在单击时替换项的类，第一部分按预期工作。如果该项具有none类，则会添加featSelected，但是如果我再次单击以取消选择它，则不会添加none类。任何想法都会受到赞赏，温柔，因为我正在学习jquery（从书中看，虽然看了一些课程！）。

 <script type="text/javascript">
          $('li span[id^="feat"]').click(function(){
          if ($(this).hasClass('none')) {
              $(this).addClass("featSelected") 
            }

            else if ($(this).hasClass('featSelected')) {
              $(this).addClass("none") 
            }

    })

    </script>

任何帮助都将不胜感激。

杰森

Answer 1

您的代码只是添加新的类名。您还必须删除旧的类名：

$('li span[id^="feat"]').click(function(){
    if ($(this).hasClass('none')) {
        $(this).removeClass("none");
        $(this).addClass("featSelected");
    } else if ($(this).hasClass('featSelected')) {
        $(this).removeClass("featSelected");
        $(this).addClass("none");
    }
});

但根据您的工作情况，您可以在两者上使用toggleClass：

$('li span[id^="feat"]').click(function(){
    $(this).toggleClass("none featSelected");
});

编辑：我注意到你的代码在语句结束时缺少分号。我在上面的示例中添加了它们，为了将来参考，您应该always use semicolons以javascript结束语句。

Answer 2

使用内置的toggleClass()功能：

$('li span[id^="feat"]').click(function(){
    $(this).toggleClass("none featSelected");
});

工作演示：http://jsfiddle.net/7fBLH/

或者，您可能要考虑不使用none作为类名，因为听起来您正在使用它来语义上说“此元素没有class”。如果是这种情况，您应该使用默认样式和CSS级联：

li span[id^="feat"] { 
    /* default styles here */
}
.featSelected {
    /* these styles show when the element has this class name */
}

Answer 3

jQuery的addClass()方法不会覆盖任何现有的类 - 如果要覆盖元素上的类，则需要做的不仅仅是调用addClass()。

由于您实际上没有删除'none'类，因此if语句的计算结果始终为true，而else代码永远不会被执行。

使用if检查类，然后添加类jquery

3 个答案: