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 未定义“

让我感到困惑的是我向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，在处理程序的所有实例之间共享。如果通过匿名函数捕获值，则使用该函数的参数。

Answer 2

i作为参考传递（而不是按值传递），因此调用onmouseover回调后，i的值已变为4。< / p>

您必须使用其他功能创建回调函数：

var menu = document.getElementById('menu');
var items = menu.getElementsByTagName('li');

for (var i = 0; i <= 3; i++) {
    items[i].onmouseover = (function(i) {
        return function() {
            addBarOnHover(i);
        };
    })(i);
}

通过制作辅助函数，你可以使它更具可读性：

var createCallback = function(i) {
    return function() {
        addBarOnHover(i);
    };
};

for (var i = 0; i <= 3; i++) {
    items[i].onmouseover = createCallback(i);
}

错误的参数传递给函数

2 个答案: