如何在for循环中警告数字

How to alert numbers in a for loop

本文关键字：警告 数字 循环 for      更新时间：2023-09-26

请帮我修复这个代码

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元素的顺序。

这是最简单的方法，您可以使用闭包，但我将保持简单。你也可以访问元素并应用样式，或者在点击处理程序

中从中获取信息

小提琴http://jsfiddle.net/bz7a2vf5/1/

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

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

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

应该做这件事。

也就是说，你应该认真阅读JS闭包，就像你的问题的评论中建议的那样。

这个问题是由于alert被调用的时间，i的值增加到3，这就是为什么它每次都给3。

尝试绑定i当前值的函数，如下面

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

最简单的方法是在函数

中提取循环的内容
function handleElement(element, i) {
    element.onmouseover=function(){alert(i);};
};
for (var i = 0; i < imgclassElements.length; i++){
    handleElement(imgclassElements[i], i);
}

或者你可以使用forEach(遗憾的是它是一个HTMLCollection而不是Array，所以这有点困难)

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

学习闭包总是一件好事

相关文章：