5

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

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

谢谢！

4

2 回答 2

5

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

与其取消设置所有元素然后选择当前元素，不如只跟踪当前元素并仅对其执行操作？

<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 代码）中。

于 2012-04-27T19:08:26.800 回答
4

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

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

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

于 2012-04-27T19:02:11.307 回答