Jquery Scope Issue

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 имеют одинаковую длину. Этот код сокращен, чтобы облегчить его понимание.

Результатом этого кода при нажатии на элемент является предупреждение «undefined». Это должны быть данные из menuLinks.

Помощь !!!!

Frankie

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 оставалось постоянным в этой области функции.Таким образом, ваша функция щелчка выбирает постоянное значение 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();
        });
    }
}