Jquery范围问题

Question

我无法弄清楚这个范围问题：

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的数据。

救命！！！！

弗兰基

Answer 1

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

您需要在.click为您的匿名函数设置i的当前值。

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

Answer 2

更清洁的代码：

var menuLinks = new Array("about.php", "contact.php");
function setClickListeners()
{
    $.each(menuLinks, function(i, element)
    {
        $("#" + menuItems[i]).click( function (e) {
            alert(menuItems[i]);
            e.preventDefault();
        });
    }
}