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

A common operation I find myself doing is the following:

我发现自己做的一个常见的手术是:

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

Is there a way to condense this, somehow by combining $allLi and $(this) and using toggleClass?

是否有一种方法可以通过结合$allLi和$(this)并使用toggleClass来压缩它?

Thanks!

谢谢!

2 个解决方案

#1

Jonathan's solution should work just fine but I would like to propose a different solution.

乔纳森的解决方案应该还可以，但我想提出一个不同的解决方案。

Rather than unsetting all the elements and then selecting the current one, why not just keep track of the current element and only perform the operation on that?

与其取消所有元素的设置，然后选择当前元素，为什么不跟踪当前元素并只对其执行操作呢?

<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>

It's "longer" but also more efficient.

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

My solution aims to have all state in JavaScript rather than partly in the DOM. toggleClass circumvents this principle. It's not so much a matter of "hey looks this a really long and super complex way of doing something simple", there's an idea behind it. If your application state gets more complex than just one selected element you'll run into issues if you try and stuff that state into the DOM. The DOM is just a 'view', keep your state in the 'model' (the JS code).

我的解决方案的目标是在JavaScript中拥有所有状态，而不是在DOM中拥有部分状态。toggleClass绕过了这一原则。这并不是说“嘿，看起来这是一种非常长的非常复杂的方法来做一些简单的事情”，它背后有一个想法。如果您的应用程序状态比一个选定的元素更复杂，那么如果您尝试将该状态填入DOM，您将遇到问题。DOM只是一个“视图”，将您的状态保持在“model”(JS代码)中。

#2

I believe you could add it, and remove it from the siblings:

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

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

Demo: http://jsbin.com/owivih/edit#javascript,html,live

演示:http://jsbin.com/owivih/edit javascript、html、生活

#1