为什么我的 jQuery 事件在循环时没有正确绑定？

Question

我正在使用 jQuery 热键插件将一些按键绑定到事件。我尝试将其更改为绑定数组上的循环，但它不起作用。

var letters = ["a","b","c"];
for (var x in letters)
{
    var letter = letters[x];
    $("el").bind('keydown', letter, function() { /*...*/  })
           .bind('keyup', letter, function() { /*...*/  });
}

此代码将所有事件绑定到数组中的最后一个字母（“c”），而不绑定到其他事件。有更好的方法吗？多谢。

Answer 1

因为 JavaScript 使用函数变量作用域。

您希望将 letter 范围限制在其自己的函数中：

var letters = ["a","b","c"];
letters.forEach(function(letter) {
    $("el").bind('keydown', letter, function() { /*...*/ } })
           .bind('keyup', letter, function() { /*...*/  });
});

您的函数基本上是 臭名昭著的循环问题。

另请参阅闭包。

---

根据您的评论（其中一些已被删除？）我建议采用以下方法：

var events = {
    a: function() {
        console.log("a is for ALPHA");
    },
    b: function() {
        console.log("b is for BRAVO");
    },
    c: function() {
        console.log("c is for CHARLIE");
    }
};
jQuery("#el").keydown(function(e) {
      var ascii = e.keyCode || e.which;
      var handler = events[String.fromCharCode(ascii).toLowerCase()];
      if(handler) {
          handler();
      }
});

jQuery keydown 事件针对用户按下的每个键执行 - 您传递给 < 的第二个参数code>bind 并不将其限制为只有一个键。

Answer 2

在这种情况下，函数体很重要。如果您在函数表达式中引用任何局部变量（x、letters、letter...），它们会“关闭” “（谷歌闭包了解更多信息）变量，当调用函数表达式来处理事件时，它们将引用分配给字母的最后一个值。例如：

var x = "Alice";
var helloAlice = function() { alert("Hello, " + x); };
x = "Bob";
helloAlice(); // Alerts "Hello, Bob"

有几种方法可以解决这个问题。一种方法是使用自执行函数：

var x = "Alice";

var helloAlice = (function(name) {
  return function() { alert("Hello, " + name); };
})(x);

x = "Bob";
helloAlice(); // Alerts "Hello, Alice"

您的代码 var letter = letter[x]; 确实不像这样工作，因为 JavaScript 不支持块级作用域，仅功能级别。这意味着在您的代码中，letter 与 letters 处于相同的范围（您还应该谷歌变量提升以获取有关此的更多信息）。