javascript - JavaScript "for"中的奇怪事情

Question

我正在使用 jQuery，但我有一件我不明白的奇怪事情。我有一些代码:

for (i = 1; i <= some_number; i++) {
    $("#some_button" + i).click(function() {
        alert(i);
    });
}

“#some_button”，顾名思义 - 它们是一些按钮。单击时，他们应该弹出一个带有编号的框，对吗？但他们没有。如果有 4 个按钮，它们总是弹出“5”(按钮数 + 1)。为什么会这样？

Answer 1

它与 JavaScript 作用域有关。您可以通过添加一个函数并让该函数调用自身并传入 i 来引入另一个作用域，从而轻松解决这个问题:

for (var i = 1; i <= some_number; i++) {
  (function(j) {
    $("#some_button" + j).click(function() {
      alert(j);
    });
  })(i);
}

这会创建一个闭包 - 当内部函数可以访问调用该函数时不再存在的范围。参见 this article在 MDC 上获取更多信息。

编辑:回复:自调用函数:自调用函数是匿名调用自身的函数。您既不实例化它，也不将其分配给变量。它采用以下形式(注意左括号):

(function(args) {
  // function body that might modify args
})(args_to_pass_in);

关于这个问题，匿名函数的主体是:

$("#some_button" + j).click(function() {
  alert(j);
});

将这些组合在一起，我们在第一个代码块中得到了答案。匿名自调用函数需要一个名为 j 的参数。它会查找 ID 为 some_button 且末尾为整数值 j 的任何元素(例如 some_button1、some_button10)。任何时候单击其中一个元素时，它都会提醒 j 的值。方案倒数第二行传入值i，即调用匿名自调用函数的循环计数器。换一种方式，它可能看起来像这样:

var innerFunction = function(j) {
  $("#some_button" + j).click(function() {
    alert(j);
  });
};

for (var i = 1; i <= some_number; i++) {
  innerFunction(i);
}