jquery列表项类切换

jquery list item class toggle

本文关键字：列表 jquery      更新时间：2023-09-26

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

<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');
});

第二种方法更短，但速度较慢。

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

编辑：这个更短更快：

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

如果性能真的是个问题，你可以将菜单存储在一个变量中，并对这个变量执行操作，比如：

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

为简洁起见：

$('ul.menu li').click(function () {
    $(this).siblings().attr('class', 'inactive').end().toggleClass('inactive active');
});

JS Fiddle演示（127个字符，删除空白字符数：115）。

JS Fiddle的字符数很高，因为简洁似乎是目的。

不幸的是，考虑到下面评论中指出的问题，纠正后的实现比（目前接受的答案）更详细，替代方案是：

$('ul.menu li').click(function () {
    var t = this;
    $(this).siblings().add(t).attr('class', function (){
        return t === this ? 'active' : 'inactive';
    });
});

JS Fiddle演示（174个字符，删除空白字符数：133）。

或者：

$('ul.menu li').click(function () {
    var t = this;
    $(this).parent().children().attr('class', function (){
        return t === this ? 'active' : 'inactive';
    });
});

JS Fiddle演示（176个字符，删除空白字符数：135）。

当然，删除了空白的jQuery确实变得有些不可读，但仍然：我声称，呃，道德上的胜利。。。

参考文献：

  • CCD_ 1
  • CCD_ 2
  • children()
  • end()
  • siblings()
  • toggleClass()
$('ul li').click(function() {
    $('ul li').each(function() {
       $(this).removeClass('active'); 
    });
    $(this).addClass('active');  
});

JSFiddle

如果SEO不重要，并且要使用较少的代码量，我会说使用单选按钮列表。然后，您可以使用"：checked"选择器在JavaScript中进行样式和交互。

如果您已经在使用jQuery UI，您可以利用可选功能。这将用最少的代码量获得您想要的东西。http://jqueryui.com/selectable/

相关文章：