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使用functional variable scoping。

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

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

你的Infamous Loop Problem基本上是一个小变化。

另见closures。

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

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事件针对用户按下的每个键执行 - 您传递给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 = letters[x]; 不的工作方式是这样的，因为JavaScript不支持块级别范围，只支持功能级别。这意味着在您的代码中，letter与letters的范围相同（您还应该通过google变量提升来获取有关此内容的更多信息）。

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

2 个答案: