2

ここでJqueryを初めて使用します。私はクリック関数に 4 つのセレクターを持っています。以下のコードを参照してください。ただし、クリックすると、クリックされたセレクターを関数で識別して、セレクターの 1 つに対してアクションを実行できるようにする必要があります。これが、クラスの代わりに ID を使用する理由です。より正確には、クリックされたセレクターの CSS をより高い z-index 値に設定して、発生する効果の影響を受けないようにしたいのですが、この場合、クリックされたセレクターに z-index 値を持たせたいのです。 10の。

if ステートメントを使用してみました。以下を参照してください。ただし、機能していません。これを行う方法を知っている人はいますか?

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

私のjQueryの試み:

$(document).ready(function(e) {

var effect = $("#slide");

$("#1, #2, #3, #4").click(function() {

    effect.animate({width: "1100px"}, 200, "easeOutQuint");
    $("#2").data('clicked', true);

    if ($("#2").data('clicked')) {
       $("#2").css("z-index", "10");
    }

});
});
4

5 に答える 5

1

thisコールバック内で単純に使用してclick、クリックされた要素を特定できます。

$("#1, #2, #3, #4").click(function() {
    effect.animate({width: "1100px"}, 200, "easeOutQuint");
    $(this).data('clicked', true);

    if ($(this).data('clicked')) {
        $(this).css("z-index", "10");
    }
});

ただし、機能させるために ID を使用する必要はありません。可能であれば、ID の代わりに 1 つの共通クラスを使用することをお勧めします。

<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>

そして JavaScript では:

$(document).ready(function(e) {
    var effect = $("#slide");

    $(".myClass").click(function() {
        effect.animate({width: "1100px"}, 200, "easeOutQuint");
        $(this).data('clicked', true);

        if ($(this).data('clicked')) {
           $(this).css("z-index", "10");
        }
    });
});

あなたの状態にはあまり意味がないことに注意してくださいif ($(this).data('clicked'))。直前条件に設定clickedしているので、常に になります。truetrue

于 2015-12-04T09:01:05.757 に答える
1

thisキーワードを使用:

$(document).ready(function(e) {

var effect = $("#slide");

$("#1, #2, #3, #4").click(function() {

    effect.animate({width: "1100px"}, 200, "easeOutQuint");
    $(this).data('clicked', true);

    if ($(this).data('clicked')) {
       $(this).css("z-index", "10");
    }

});
});
于 2015-12-04T09:02:31.543 に答える
0

attr()すべての div に ID を z-index のみに追加してから jquery関数を使用する必要はありません

現在クリックされているアイテム (現在クリックされているアイテムを参照) の ID を取得し、$(this)条件が true の場合に z-index を追加するには、次のようにします。

<div></div>
<div id="zindex"></div>
<div></div>
<div></div>


   $(document).ready(function(e) {

    var effect = $("#slide");

    $("div").click(function() {

        effect.animate({width: "1100px"}, 200, "easeOutQuint");
        if ($(this).attr('id') == "zindex") {
           $(this).css("z-index", "10");
        }

    });
    });

jsfiddle を参照してください: https://jsfiddle.net/596w1hwr/

于 2015-12-04T09:08:30.863 に答える
0

使用event.target:

$(document).ready(function(e) {

var effect = $("#slide");

$("#1, #2, #3, #4").click(function(event) {

    effect.animate({width: "1100px"}, 200, "easeOutQuint");
    $("#2").data('clicked', true);

    if($(event.target).attr("id") == "2" ){
       $("#2").css("z-index", "10");
    }

});
});

@Spencer Wieczorek コメントに基づいて編集します。クリックした入力をz-index10 にしたい場合は、次のようにします。

$(document).ready(function(e) {

var effect = $("#slide");

$("#1, #2, #3, #4").click(function(event) {

    effect.animate({width: "1100px"}, 200, "easeOutQuint");
    $("#2").data('clicked', true);

    $(event.target).css("z-index", "10");
});
});
于 2015-12-04T09:01:14.157 に答える
0

これが役立つかもしれませんし、スイッチケースを使用することもできます

$("#1, #2, #3, #4").click(function() {

if($(this).attr("id") == "1"){
//do sth
}else if($(this).attr("id") == "2"){
//do sth
}else{
//
}

});

また

于 2015-12-04T09:03:41.730 に答える