1

重複の可能性:
要素の外側のクリックを検出する方法は?

ユーザーがリスト項目の1つをクリックすると、リスト項目が「アクティブ」のクラスを取得する順序付けられていないリストがあります。の行に沿ってステートメントを書くことは可能ですか。ユーザーが $(this) から別のリスト項目をクリックすると、addClass("active2") になります。わからない場合はお知らせください。ありがとうございました！

4

2 に答える 2

1

私はあなたの質問を次のように理解しました：

最初にクリックされたアイテムは常にクラスactive2を保持し、他のクリックされたアイテムはクラスを取得しますactive(前にクリックされたアイテムから削除activeされます)。

解決策は次のようになります。

  • リストに class の項目がない場合は、active以前に何も選択されていなかったためactive、現在の項目に追加します。
  • あるが class を持つ要素がない場合は、 classを持つアイテムにactive2追加し、それを削除して現在のアイテムに追加します。active2activeactive
  • 両方が存在する場合は、activeその項目からactive2削除activeして現在の項目に追加activeします。

これは、コードでは次のようになります。

var $lis = $("#myList li");

$('#myList').on('click', 'li', function() {
    if($lis.hasClass('active')) {
        if(!$lis.hasClass('active2')) {
            $lis.filter('.active').toggleClass('active active2');
        }
        else {
            $lis.filter('.active').removeClass('active');
        }
    }
    $(this).addClass('active');
});

または、アイテムが 2 回目にクリックされた後は、これらのクラスを持つ要素アイテムが常に存在するため、要素を何度も検索する代わりに、単純にフラグを使用することもできます。

于 2012-07-31T16:52:57.883 に答える
0

改訂された質問に対する改訂された回答：

$(document).ready(function() {
    $('ul#myList li:not(.active)').click(function() {
        // user has clicked on an li that does not have class="active"
        $(this).addClass('active');
        $('ul#myList li.active').each(function() {
            // for each li with class="active", remove it and add "active2"
            $(this).removeClass('active').addClass('active2');
        });
    });
});
于 2012-07-31T16:34:55.350 に答える