javascript - 遍历元素并添加索引号

Question

为什么class=hello5单击此代码会添加到所有 h2 元素？有 4 个 h2 元素。

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>

我必须添加另一个循环吗？我很困惑。谢谢。

Answer 1

i在您的回调中与i您递增的相同。到触发这些回调函数时，i的值将是8，因此所有回调将添加相同的类。

通常避免在循环中创建事件处理程序。一次选择这些元素并为所有元素添加一个事件处理程序要容易得多：

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

jsfiddle 上的演示

Answer 2

主要问题是您期望处理程序的参数作为索引，但事实并非如此，它是 eventObject。

你最好像这样使用 .each() 函数：

$("h2").each(function(index, item){
   $(item).click(function(e){
       e.preventDefault();
       $(this).addClass("hello" + index);
   })
})

Answer 3

我编辑了你的 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)
});

在这里提琴

Answer 4

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

$("h2").each(function(index,element){
   $(element).addClass("hello" + index);
})

Answer 5

因为当时点击事件是火灾。变量i是完成循环，它得到值4。解决方案是使用必须获取h2元素的索引并分配给类。我有一点改变：

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

jsfiddle 上的演示