Question

我有各种具有类.folder

的元素

当我点击一个时，我想将类active添加到其中，并从任何其他元素中删除该类。

问题是首先将类从其他类中删除，它根本就不这样做。

以下是我正在尝试的内容：

$('.folder').click(function() {
    $(this).siblings('.folder').removeClass('active'); // remove from all other <SPAN>s
    $(this).addClass('active'); // add onto current
})

示例HTML：

<ul>
    <li class="closed last">
        <span class="folder" id="16">More coding</span>
    </li>
</ul>  
</li>
<li class="closed collapsable lastCollapsable">
    <span class="folder active" id="12">Music</span>
    <ul style="display: block;" id="browser" class="filetree treeview-famfamfam">
        <li class="closed collapsable">
            <span class="folder active" id="13">Music child</span>
                <ul style="display: block;" id="browser" class="filetree treeview-famfamfam">
                    <li class="closed last">
                        <span class="folder" id="15">More music</span>
                    </li>
                </ul>
         </li>
         <li class="closed last"><span class="folder" id="17">Another child here</span> </li>
     </ul>
    </li>
</ul>

Answer 1

根据我的意见，从所有元素中删除类

$('.folder').click(function() {
    $('.folder.active').removeClass('active'); // Just remove class from all folder
    $(this).addClass('active'); // add onto current
})

Answer 2

简单有效：

$('.folder').click(function() {
    $('span .folder').removeClass('active'); // remove from all other <SPAN>s
    $(this).addClass('active'); // add onto current
})

Answer 3

这里有3种可能的解决方案。

一个基本的：

$('span.folder').click(function() {
    $('.folder').removeClass('active');
    $(this).addClass('active');
})

快一点：

$('.folder').click(function() {
    $('span.folder.active').removeClass('active');
    $(this).addClass('active');
})

如果.active还有其他元素，那么最快但不会工作：

$('.folder').click(function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
})

JsPerf：http://jsperf.com/three-solutions

活动类兄弟removeClass

3 个答案: