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

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代码).