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

Question

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

我想要做的就是，如果用户点击了跨度bButton，那么selected类将从所有其他跨度中删除，并替换为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类，则不会选中它。

Answer 2

试试这个：

$('span').click(function(){
  $(this).parent().children('span').each(function(){
    $(this).removeClass('selected').addClass('notSelected');
  });
  $(this).removeClass('notSelected').addClass('selected');
});

工作示例：http://jsfiddle.net/AlienWebguy/SnnzV/

Answer 3

$('span').live('click',function(){

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


    $(this).siblings().each(function(){

          $(this).removeClass('Selected');
          $(this).addClass('notSelected');

    });

});