javascript - 在函数内使用循环变量，javascript 作用域混淆

Question

我已经构建了一个下拉菜单系统，独立测试时一切正常，我遇到的问题在下面的代码中。我使用 jQuery 就绪函数从外部数组 (menubar[]) 构建菜单栏。在这里，我试图让鼠标悬停事件调用 dropdown() 函数，但为每个 anchor 标记使用不同的参数。

所以滚动第一个应该调用 dropdown(0)，第二个 dropdown(1) 等等。

$(document).ready(function () {
    for (i in menubar) {
        var declaration = '<a href="' + baseurl + '/' + menubar[i].url +
                          '" class="menutitle">' + menubar[i].name + '</a>';
        var a = $(declaration).mouseover(function () {
            dropdown(i);
        }).mouseout(function () {
            activeTimer = setTimeout("removedropdowns()", 100);
        });
        $("#menu").append(a);
    }
});

代码正在调用 dropdown(6);在每次翻转。如何将循环变量 (i) 作为文字/静态值传递到鼠标悬停函数中!

我通过使用在 FF 中使它工作正常

.attr('onMouseOver','javascript:dropdown('+i+');')

但是对于某些版本的 IE 并没有触发，所以我切换到 jQuery 鼠标悬停，它触发了，但是我有上面的问题:(

Answer 1

您的实际问题是，您的每个鼠标悬停回调都使用相同 i，您将i 一直增加到 6，回调仍然指向相同的 i，因此都使用 6 作为值。

您需要复制i 的值，您可以使用匿名函数 来完成此操作。

$(document).ready(function () {
    // you should use (for(var i = 0, l = menubar.length; i < l; i++) here in case menubar is an array
    for (var i in menubar) {
        var declaration = '<a href="' + baseurl + '/' + menubar[i].url +
                          '" class="menutitle">' + menubar[i].name + '</a>';


        (function(e) { // e is a new local variable for each callback
            var a = $(declaration).mouseover(function () {
                dropdown(e);

            }).mouseout(function () {
                activeTimer = setTimeout(removedropdowns, 100); // don't use strings for setTimeout, since that calls eval
            });
            $("#menu").append(a);
        })(i); // pass in the value of i
    }
});