Question

示例：

<div>
    <A><span class="bla">test</span></a>
    <A><span class="bla">test test</span></a>
    <A><span class="bla">test test test</span></a>
</div>

只是想知道我们是否可以这样做：

$('span.bla').click(function(){
   $(this).addClass('selected').others_with_this_class().removeClass('selected');
});

或者我们真的需要制作两个不同的选择器，并逐个处理它们。

修改：

感谢大家的想法，我发现做了这样的事情： - ）

if (!$(this).hasClass('selected'))
$(this).addClass('selected').parent().siblings('a').children('.selected').removeClass('selected');

Answer 1

你是什么意思“一个一个地处理它们”？

为什么不从.selected项中删除该类，然后将该类添加到您单击的项目中：

$('span.bla').click(function(){
   $('.selected').removeClass('selected');
   $(this).addClass('selected');
});

Answer 2

我喜欢从所有内容中清除该类，然后将其添加到单个类中：

$('span.bla').click( function() {
    $('span.bla').removeClass('selected');
    $(this).addClass('selected');
}

Answer 3

使用$.siblings()：

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

这将找到范围的父级（<a>），它的所有兄弟姐妹，以及那些兄弟姐妹的子级<span>，并向其添加.current。

Answer 4

$('span.bla').click(function(){
   $('span.bla').removeClass('selected');
   $(this).addClass('selected');
});

除了这个类以外，还有什么整齐的选择器吗？

4 个答案: