javascript - jQuery范围问题

我不知道这个范围问题:

var menuLinks = new Array("about.php", "contact.php");
function setClickListeners()
{
    for(var i=0; i<menuItems.length; i++)
    {
        $("#" + menuItems[i]).click( function () {
            window.alert(menuLinks[i]);
        });
    }
}

注意:menuItems和menuLink的长度相同。简化了这段代码，以使理解起来更加容易。

单击某个项目时，此代码的结果为警报“未定义”。它应该是来自menuLinks的数据。

救命!!!!

弗兰基

最佳答案

for (var i=0; i < menuItems.length; i++) {
    (function(i) {
         $("#"+menuItems[i]).click(function() {
              alert(menuLinks[i]);
         });
    }(i));
}

您需要将i的当前值本地化为.click中的匿名函数。

JavaScript仅具有功能范围。因此，如果您不将i设置为本地，则每按一次i的值就是当前值，在这种情况下为menuItems.length - 1。

您在上面所做的工作是创建一个新的功能范围并将i的值传递到其中，以便i的当前值在该功能范围内保持恒定。这样，您的click函数就会从闭包中获取i的常量值。

jslint

让我们过度复杂化代码并满足jslint的要求。

var wrapper = function(i) {
    $("#"+menuItems[i]).click(function() {
         alert(menuLinks[i]);
    });
};

for (var i=0; i < menuItems.length; i++) {
    wrapper(i);
}