Question

请帮我修复此代码

HTML

<p class="imgclass">Test1</p>
<p class="imgclass">Test2</p>
<p class="imgclass">Test3</p>

的JavaScript

imgclassElements = document.getElementsByClassName('imgclass');
for (var i = 0; i < imgclassElements.length; i++){
    imgclassElements[i].onmouseover=function(){alert(i);};
}

在浏览器onmouseover中，类.imgclass的元素仅显示警告框，文字为“3”。如何修复这个？我想弹出警报窗口，其中包含适当的.imgclass元素顺序值。

Answer 1

这是最简单的方法，你可以使用一个闭包，但我会保持简单。您还可以访问元素并应用样式，或从单击处理程序中获取信息

<强> FIDDLE http://jsfiddle.net/bz7a2vf5/1/

<强> HTML

<p id="item1" class="imgclass">Test1</p>
<p id="item2" class="imgclass">Test2</p>
<p id="item3" class="imgclass">Test3</p>

<强> JS

imgclassElements = document.getElementsByClassName('imgclass');
for (var i = 0; i < imgclassElements.length; i++) {
    click(i);
}

function click(i){
       imgclassElements[i].onmouseover = function (e) {

       // you can also get the element from e.target
       alert(i);
       alert(e.target.id);
    };
}

Answer 2

这可能不是最优雅的方式，但

imgclassElements[i].addEventListener('mouseover',function(j){return function(){alert(j);};}(i));

应该这样做。

那就是说，你应该按照你的问题的评论中的建议阅读JS闭包。

Answer 3

由于时间alert被调用，问题正在发生，i的值增加到3，这就是为什么它会给{{1}每一次。

尝试使用当前值3绑定一个函数，如下面的

也可以有更好的解决方案。

Answer 4

最简单的方法是在函数中提取循环内容

function handleElement(element, i) {
    element.onmouseover=function(){alert(i);};
};
for (var i = 0; i < imgclassElements.length; i++){
    handleElement(imgclassElements[i], i);
}

或者你可以使用forEach（遗憾的是它是一个HTMLCollection而不是数组，所以它有点困难）

Array.prototype.forEach.call(imgclassElements, function(element, i) {
    element.onmouseover=function(){alert(i);};
});

或者将索引作为参数

for (var i = 0; i < imgclassElements.length; i++){
    imgclassElements[i].onmouseover=(function(i){alert(i);}).bind(null, i);
}

了解闭包总是一件好事

如何在for循环中提醒数字

4 个答案: