1

あいまいなタイトルで申し訳ありませんが、jQuery コードを短くする方法について質問があります。

$(function() {
    $("#profile1").click(function() {
        $("#profile1").addClass("focused");
        $("#profile2").removeClass("focused");
        $("#profile3").removeClass("focused");
    });
    $("#profile2").click(function() {
        $("#profile1").removeClass("focused");
        $("#profile2").addClass("focused");
        $("#profile3").removeClass("focused");
    });
    $("#profile3").click(function() {
        $("#profile1").removeClass("focused");
        $("#profile2").removeClass("focused");
        $("#profile3").addClass("focused");
    });
});

私が見ることができるように、toggleClass はそれを行いません。なぜなら、そのオブジェクトを 2 回続けて押すことができるため、複数のオブジェクトを同時にフォーカスできるためです。一度にフォーカスできるオブジェクトは 1 つだけです (つまり、クラスを「フォーカス」できます)。

これは初心者の私ですが、「これ」をどこかに含める必要があると思いますが、方法がわかりません。

前もって感謝します！あなたたち最高！

4

1 に答える 1

7

それらすべてからクラスを削除してから、対象のクラスにのみ追加します。また、単一のイベント ハンドラーのみを使用し、イベント ターゲットを動的に参照します。

$(function() {
    var $profiles = $("#profile1, #profile2, #profile3");
    $profiles.click(function(e) {
        $profiles.removeClass("focused");
        $(this).addClass("focused"); // or use `e.target` instead of `this`
    });
});

ID の代わりにクラスを使用し.profileて要素を選択することもできます。

于 2013-10-30T01:03:30.467 に答える