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

Question

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

因此，滚动第一个应该调用 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 mouseover，它会触发，但我遇到了上面的问题:(

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

Answer 2

$(function() {
    $(menubar).each(function(i){
        $("#menu").append('<a href="' + baseurl + '/' + menubar[i].url + '" class="menutitle">' + menubar[i].name + '</a>');
    });

    $("#menu a").hover(
        function(){
            dropdown($(this).index());
        },
        function(){
            activeTimer = setTimeout("removedropdowns()", 100);
        }
    );
});

Answer 3

首先，不要使用 for..in 而是使用普通循环。

其次，我只是先附加链接，然后再应用事件：

$(document).ready(function() {
    for (var i = 0; i < menubar.length; i++) {
        $("#menu").append('<a href="' + baseurl + '/' + menubar[i].url + '" class="menutitle">' + menubar[i].name + '</a>');
    }

    $("#menu a").each(function(index) {
        $(this).mouseover(function() { dropdown(index); }).mouseout(function() { activeTimer = setTimeout("removedropdowns()", 100); });
    });
});

Answer 4

看看这里和此处。

要捕获 i 的当前值，您需要将其作为参数传递给另一个函数，在该函数中可以将其捕获为局部变量：

Answer 5

尝试使用 jQuery 的 each() 函数：

jQuery(function() {
  jQuery.each(menubar, function(index, element) {
    var declaration = '<a href="' + baseurl + '/' + element.url + '" class="menutitle">' + element.name + '</a>';
    var a = $(declaration).mouseover(function() { dropdown(index); }).mouseout(function() { activeTimer = setTimeout("removedropdowns()", 100); });
    $("#menu").append(a);
  });
});

Answer 6

在 JavaScript 中，如果您不声明变量，它将被全局定义。要解决此问题，请在 i 循环变量前面添加“var”，如下所示。更新：正如 Sime 注意到的（参见注释），您还需要将变量传递到函数中，否则您会在 i 上形成一个闭包。

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