JavaScript 闭包。在循环中访问当前 i、j 变量[重复]

我尝试动态生成<table>使用 jQuery，我想为每个单元格设置单击处理程序，因此当单元格单击时，弹出窗口将显示单元格的当前索引。我如何访问 CURRENTi and j循环中的变量？

  for(var i = 0; i < 5; i++) {
      var tr = $('<tr></tr>');
      for (var j = 0; j < 5; j++) {
          var td = $('<td></td>');
          td.click(function() {
            alert(i + ' ' + j);  // here I want to access to CURRENT i, j variables
          })
          td.appendTo(tr);
      }
  }    

其他答案主要解释了如何解决闭包问题，尽管此类方法的内存效率不是特别高，因为它们最终会为每个可能的组合创建一个新的闭包i and j.

但是，由于您使用的是 jQuery，因此您还有许多其他选项可供使用：

Pass data参数到.on call

td.on('click', { i: i, j: j }, function(event) {
    var i = event.data.i;
    var j = event.data.j;
    alert(i + ' ' + j);
});

The i and j如您在上面看到的值将可用event.data

Use $.each迭代而不是for

$.each(Array(5), function(i) {
    // i is already bound here because it's a function parameter
    $.each(Array(5), function(j) {
        // and j available here
        td.on('click', ...);
    });
});

使用事件委托而不是每个元素处理程序

$('#myTable').on('click', 'td', function() {
    // use jQuery methods to determine the index, e.g.
    var j = this.cellIndex
    var i = this.parentNode.rowIndex
    ...
});

这比将单独的处理程序绑定到每个处理程序更有效<td>单独。

更一般地说，使用.data()存储每个单元格的信息

您可以将数据值直接存储在元素上，如果您想检索单元格和行索引以外的值，这将非常有效：

td = $('<td>').data({i: i, j: j});

然后直接从单击的元素中提取这些行和列值.data:

for (var i = 0; i < 5; i++) {
    var tr = $('<tr></tr>');
    for (var j = 0; j < 5; j++) {
        $('<td></td>').data({i: i, j: j}).appendTo(tr);
        td.appendTo(tr);
    }
}

$('#myTable').on('click', 'td', function() {
    var data = $(this).data();
    var i = data.i;
    var j = data.j;
    alert(i + ' ' + j);
});