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

您需要将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);
}

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