为什么我的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事件为用户按下的每个键执行 - 您传递给的第二个参数bind不会将其限制为只有一个键.