javascript - 错误的参数传递给函数

Question

我有以下代码，将 onmouseover 事件添加到项目符号onload

for (var i = 0; i <= 3; i++) {
    document.getElementById('menu').getElementsByTagName('li')[i].onmouseover = function () { addBarOnHover(i); };
}

这是它正在调用的函数。当鼠标移到菜单项上时，它应该向菜单项添加一个 css 类。

function addBarOnHover(node) {
    document.getElementById('menu').getElementsByTagName('li')[node].className = "current_page_item"; }

当调用该函数时，我不断收到错误:

"document.getElementById("menu").getElementsByTagName("li")[node] is undefined"

令我困惑的是我在 addBarOnHover 函数中添加了一条alert(node)语句来查看参数的值是什么。警报说传递的参数值为 4。我不确定我设置的循环是如何发生这种情况的。

任何帮助将不胜感激。

Answer 1

这是关闭迭代变量时的常见问题。将 for 主体包装在额外的方法中以捕获迭代变量的值:

for (var i = 0; i <= 3; i++) {
  (function(i){ //here
    document.getElementById('menu').getElementsByTagName('li')[i].onmouseover = function () { addBarOnHover(i); };
  })(i); //here
}

每次进入循环时都会创建一个匿名函数，并向其传递迭代变量的当前值。匿名函数内部的 i 引用该函数的参数，而不是外部作用域中的 i。

为了清楚起见，您还可以重命名内部变量:

for(var i=0; i<=3; i++){
  (function(ii){
    //use ii as i
  })(i)
}

如果不捕获迭代变量，最终在匿名处理程序中使用时，i 的值已更改为 4。外部作用域中只有一个 i，在处理程序的所有实例之间共享。如果您通过匿名函数捕获该值，则会使用该函数的参数。