Question

我发现自己正在做的一项常见操作如下：

<ul>
    <li>One</li>
    <li class="current">Two</li>
    <li>Three</li>
</ul>

var $allLi = $('li');

$allLi.click(function(){
    $allLi.removeClass('current');
    $(this).addClass('current');
});

有没有办法通过组合$ allLi和$（this）以及使用toggleClass来压缩这个？

谢谢！

Answer 1

Jonathan的解决方案应该可以正常工作，但我想提出一个不同的解决方案。

为什么不跟踪当前元素并仅对其执行操作，而不是取消设置所有元素然后选择当前元素？

<ul>
    <li>One</li>
    <li class="current">Two</li>
    <li>Three</li>
</ul>

<script type="text/javascript">
    (function () {
        var current = $("li.current");
        $("li").click(function () {
            current.removeClass("current");
            current = $(this);
            current.addClass("current");
        });
    }());
</script>

它“更长”但也更有效率。

我的解决方案旨在将所有状态都放在JavaScript中，而不是部分放在DOM中。 toggleClass规避了这一原则。这不是一个“嘿看起来这是一个非常漫长而且非常复杂的简单做事方式”的问题，背后有一个想法。如果您的应用程序状态变得比仅仅一个选定元素更复杂，那么如果您尝试将该状态填充到DOM中，则会遇到问题。 DOM只是一个“视图”，将您的状态保存在“模型”（JS代码）中。

Answer 2

我相信你可以添加它，并从兄弟姐妹中删除它：

$("li").on("click", function(){
  $(this)
    .addClass("current")
    .siblings()
      .removeClass("current");
});

演示：http://jsbin.com/owivih/edit#javascript,html,live

Jquery从很多类中删除类，将类添加到一个

2 个答案: