javascript - 在一个循环中，我附加了一个标记来提醒循环索引计数。为什么它总是提醒循环的最后一个索引？

Question

为了您的方便，here's an interactive jsfiddle version of my code.这是有问题的代码:

for i in [1, 2, 3, 4, 5, 6, 7, 8]
  console.log "cell #{i} was created!"
  cell = $('<div class="inventory-cell"></div>').mousedown (event) ->
    alert "#{i} was clicked!"
  $("#inventory-grid").append(cell)

这是 html:

<div id="inventory-dialog" class="dialog">    
    <div id="inventory-grid"></div>    
</div>

这是它应该如何工作的。这将在循环中生成一堆单元格。如果我点击第一个，我想让它提醒，“1 was clicked!”当我点击最后一个时，我希望它说，“8 被点击了!”但出于某种原因，我点击的每个人都说，“8 被点击了”。为什么会这样？

Answer 1

所有回调都在它们的主体中引用相同的 i 变量，在调用这些回调中的任何一个时，该变量的值为 8。

您需要为每个特定回调创建一个本地变量，该变量在创建回调时保存 i 的值:

(function(j) {
    var cell = $('<div class="inventory-cell"></div>').mousedown(function(event) {
        alert("#{j} was clicked!");
    });

    $("#inventory-grid").append(cell);
})(i);

功能上等效的 CoffeeScript 是:

do (i) ->
  cell = $('<div class="inventory-cell"></div>').mousedown (event) ->
    alert "#{i} was clicked!"

  $("#inventory-grid").append(cell)

唯一的区别是 do 会隐藏 i 而不是创建一个新变量，但结果是一样的。

准确的翻译是:

do (j = i) ->
  cell = $('<div class="inventory-cell"></div>').mousedown (event) ->
    alert "#{j} was clicked!"

  $("#inventory-grid").append(cell)