0

class=hello5クリックすると、このコードがすべての h2 要素に追加されるのはなぜですか? h2 要素は 4 つあります。

for (i=0; i < $('h2').length; i++) {
  $('#' + i).click(function(index) {
    $(this).addClass('hello' + i)
  })
};

class=hello0、class=hello1などを追加したい

HTML:

<h2 id="0">0</h2>
<h2 id="1">1</h2>
<h2 id="2">2</h2>
<h2 id="3">3</h2>

別のループを追加する必要がありますか? よくわかりません。ありがとう。

4

5 に答える 5

2

iあなたのコールバックでは、iインクリメントしているものと同じです。これらのコールバック関数がトリガーされるまでに、iの値は になる8ため、すべてのコールバックが同じクラスを追加します。

一般に、ループでイベント ハンドラーを作成することは避けてください。これらの要素を一度に選択して、それらすべてに 1 つのイベント ハンドラーを追加する方がはるかに簡単です。

$('h2').click(function() {
    $(this).addClass('hello' + this.id);
});

jsfiddle のデモ

于 2013-07-13T05:39:11.697 に答える
1

主な問題は、ハンドラーのパラメーターをインデックスとして期待しているが、そうではなく、eventObject であることです。

次のように .each() 関数を使用することをお勧めします。

$("h2").each(function(index, item){
   $(item).click(function(e){
       e.preventDefault();
       $(this).addClass("hello" + index);
   })
})
于 2013-07-13T05:37:53.520 に答える
0

http://jsfiddle.net/Jbh3q/203/

$("h2").each(function(index,element){
   $(element).addClass("hello" + index);
})
于 2013-07-13T06:06:19.357 に答える
0

その時点でクリックイベントが発生するためです。変数iは終了ループで、値 4 を取得します。解決策は、h2要素のインデックスを取得してクラスに割り当てる必要があります。少し変更があります：

$().ready(function () {
    for (i = 0; i < $('h2').length; i++) {
        $('#' + i).click(function (index) {
            $(this).addClass('hello' +$("h2").index( $(this)))
        })
    };
})

jsfiddle のデモ

于 2013-07-13T06:12:13.837 に答える
0

私はあなたのHTMLスニペットを編集しました:

<h2 id="id0">0</h2>
<h2 id="id1">1</h2>
<h2 id="id2">2</h2>
<h2 id="id3">3</h2>

このコードを試してください:

$('h2[id^="id"]').click(function(index){
    var idx = $(this).index();
    $(this).addClass('hello' + idx)
});

ここでフィドル

于 2013-07-13T06:01:26.703 に答える