JavaScript 变量不会保留在 jQuery 事件处理程序中

Question

出于

某种原因，我不了解与jQuery点击处理程序相关的局部和全局变量的范围。当我单击按钮时，我得到"未定义"，但我希望它显示单击的按钮的类别。我该如何解决这个问题？

我设置了一个示例来显示我的困惑。在这里小提琴：http://jsfiddle.net/zvhsqeyn/

简单的 html 按钮：

<button class="hobbies">hobbies</button>
<button class="sledding">sledding</button>
<button class="personal">personal</button>
<button class="food">food</button>

一些javascript来处理单击按钮的事件。

var GLOBAL_CATEGORIES = ['hobbies', 'sledding'];
$(window).load(function() { 
    var categories = ['personal', 'food'];
    // local categories
    for (var i = 0; i < categories.length; i++) {
        $('.' + categories[i]).click(function() {
            alert(categories[i]);
            return false;
        });
    }
    // Global categories
    for (var i = 0; i < GLOBAL_CATEGORIES.length; i++) {
        $('.' + GLOBAL_CATEGORIES[i]).click(function() {
            alert(GLOBAL_CATEGORIES[i]);
            return false;
        });
    }
});

编辑：接受反馈后，这是正常工作 http://jsfiddle.net/zvhsqeyn/1/

Answer 1

这与闭包的性质有关。

// local categories
for (var i = 0; i < categories.length; i++) {
    $('.' + categories[i]).click(function() {
        alert(categories[i]);
        return false;
    });
}

您将分配一个匿名函数作为其中每个按钮的单击处理程序。 该函数可以访问变量i，因为它在父作用域中可见。 但是 - 当您单击其中一个按钮时，您的循环早已完成，并且i的值现在等于 categories.length。 那里没有任何元素，因此您的单击函数返回 undefined 。

通常，在循环中分配事件处理程序时依赖索引变量的值是不安全的。 作为解决方法，您可以使用 jquery $.each 函数：

$.each(categories, function(index, value) {
    // local categories
    $('.' + value).click(function() {
        alert(value);
        return false;
    });
});

这是有效的，因为它为每个单击处理程序函数创建了一个单独的闭包。

Answer 2

这是一个非常常见的问题，这是解释

如果我们按照这个过程进行操作，您正在做的是将点击侦听器添加到第 i 个GLOBAL_CATEGORIES，然后继续下一个。 执行此操作，直到i对于GLOBAL_CATEGORIES数组来说太大。

您必须记住，i只设置了一次，所以现在i比GLOBAL_CATEGORIES的长度多 1 . 这意味着当警报触发时，GLOBAL_CATEGORIES[i]未定义，因为警报太大i。

更好的方法是使用 jQuery each语法，如下所示

$.each(GLOBAL_CATEGORIES, function(i, category) {
    $('.' + category).click(function() {
        alert(category);
        return false;
    });
});