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);
});

Demo on jsfiddle

Answer 2

主要问题是你希望把处理程序的参数作为索引，但它不是，它是事件对象。

你最好使用像这样的.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)
});

Fiddle here

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)))
        })
    };
})

Demo on jsfiddle

迭代元素并添加索引号

5 个答案: