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

Question

我是 jquery 的新手，下面的代码有一些问题，代码试图在点击时替换项目的类，第一部分按预期工作。如果该项目的类别为无，则添加featSelected，但是如果我再次单击以取消选择它，则不会添加无类别。任何想法都将不胜感激，就像我在学习 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

使用内置的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 2

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

$('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 3

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

由于您实际上并没有删除“无”类，因此您的 if 语句始终评估为 true，而 else 代码永远不会被执行。