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>

それは「より長い」だけでなく、より効率的です。

私のソリューションは、部分的に DOM ではなく、JavaScript ですべての状態を保持することを目指しています。toggleClassこの原則を回避します。「これは単純なことを行うのに非常に長くて非常に複雑な方法に見えます」という問題ではなく、その背後にはアイデアがあります。アプリケーションの状態が選択された 1 つの要素よりも複雑になった場合、その状態を 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 に答える