jquery列表项类切换 [英] jquery list item class toggle

问题描述

我有一个简单的功能可以将列表项类从活动切换到非活动。什么是最有效的方式（即，使用最少量的代码）将所有其他列表项设置为非活动，以便只能有一个活动列表项？请参阅下面的示例。谢谢

I have a simple function to toggle list item class from "active" to "inactive". What is the most efficient way (i.e., using the least amount of code) to set all other list items to "inactive" so that there can only be one "active" list item? Please see below for an example. Thank you

<ul class="menu">
    <li id="one" class="active">One</li>
    <li id="two" class="inactive">Two</li>
    <li id="three" class="inactive">Three</li>
    <li id="four" class="inactive">Four</li>
    <li id="five" class="inactive">Five</li>
</ul>

<script>
    $('#one').click(function () {
        if ($(this).hasClass("inactive")) {
            $(this).removeClass("inactive").addClass("active");
        } else {
            $(this).removeClass("active").addClass("inactive");
        }
    });
</script>

推荐答案

这可行：

$('.menu li').click(function () {
    $('.menu li').not(this).removeClass('active').addClass('inactive');
    $(this).addClass('active').removeClass('inactive');
});

或

$('.menu li').click(function () {
    $('.menu li').removeClass('active').addClass('inactive');
    $(this).toggleClass('active inactive');
});

第二种方法更短，但更慢。

The second method is shorter, but slower.

http://jsperf.com/toggle-vs-add-remove

编辑：这个更短更快：

$('.menu li').click(function () {
    $('.menu li').not(this).removeClass('active');
    $(this).addClass('active');
});

如果性能确实存在问题，您可以将菜单存储在变量中并对此变量执行操作，喜欢：

If performance is really a problem you can store your menu in a variable and perform operations on this variable, like:

var $menu = $('.menu li');
$menu.click(function () {
        $menu.not(this).removeClass('active');
        $(this).addClass('active');
    });

这篇关于jquery列表项类切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！