Jquery从许多中删除类，将类添加到一个答案

【问题标题】：Jquery remove class from many, add class to oneJquery从许多中删除类，将类添加到一个
【发布时间】：2012-04-28 03:37:41
【问题描述】：

我发现自己做的一个常见操作如下：

<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 来压缩它？

谢谢！

【问题讨论】：

您所做的工作与使用 jQuery 方法一样高效。

标签： javascript jquery optimization addclass removeclass

【解决方案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 代码）中。

【讨论】：

为什么不简单地将类添加到 setter 的同一行？
请不要对我的代码进行微不足道的编辑。是的，我知道current = $(this).addClass("current"); 有效，但它是否使代码更具可读性？没有。
那么我想我们只需要对此有不同意见:) 但由于这是我的解决方案，我想保留它的偏好。
好吧……我只是想帮助你。

【解决方案2】：

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

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

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

【讨论】：