jquery - 单击跨度时，从同一父级下的其他跨度中删除所有类

Question

有一些类似的问题，但要么过于宽泛，要么没有显示好的示例代码。

我想要做的就是如果用户点击 span bButton，那么 selected 类将从所有其他 span 中删除并替换为 notSelected 类。

<div id="mainNav">
  <span id="aButton" class="button selected">a</span>
  <span id="bButton" class="button notSelected">b</span>
  <span id="cButton" class="button notSelected">c</span>
</div>

这个问题的 jQuery 解决方案是什么？

谢谢!

Answer 1

1. 从被点击的元素中移除 notSelected 类。
2. 将 selected 类添加到被点击的元素中。
3. 从所有同级中删除 selected 类。
4. 将 notSelected 类添加到所有同级。

$('#mainNav > span').click(function() {

       $(this)
        .removeClass('notSelected')
        .addClass('selected')
        .siblings()
         .removeClass('selected')
         .addClass('notSelected');

});

jsFiddle .

作为旁注，我不会打扰 notSelected 类。

您可以通过 selected 的存在来决定选择哪个元素。如果元素没有 selected 类，则它不会被选中。