将参数传递给事件功能

Question

看看这个简单的示例

<input type="button" value="btn1" id="btn1" /> 
<input type="button" value="btn2" id="btn2" /> 
<input type="button" value="btn3" id="btn3" /> 
<input type="button" value="btn4" id="btn4" /> 
<input type="button" value="btn5" id="btn5" /> 

<script> 
    for (i=1; i<5; ++i){ 
     var btn = document.getElementById('btn' + i); 
     btn.onmouseover = function(){ 
      alert(i); 
     } 
    } 
</script> 

我希望它应该例如1警报，当我继续前进btn1我的鼠标，但不幸的是它提醒5了！

我如何将循环中的变量传递给函数？

Answer 1

这是闭环问题。所有鼠标悬停在同一个变量上，因为JavaScript只有函数范围。您可以通过创建一个新功能来修复它，从而创建一个新的范围。

for (i=1; i<5; ++i){ 
    (function(i) 
    { 
     var btn = document.getElementById('btn' + i); 
     btn.onmouseover = function(){ 
      alert(i); 
     } 
    })(i); 
}