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

Question

我尝试使用 jQuery 动态生成<table>，并且我想为每个单元格设置单击处理程序，因此当单击单元格时，弹出窗口将显示当前单元格的索引。如何在循环中访问 CURRENT i 和 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);
      }
  }    

Answer 1

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

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

将data 参数传递给.on 调用

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

您在上面看到的i 和j 值将在event.data 中可用

使用$.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);
});

Answer 2

将它们引入新的作用域将捕获它们的当前值：

(function(i, j) {
    td.click(function() {
        alert(i + ' ' + j);  // here I want to access to CURRENT i, j variables
    });
})(i, j);

Answer 3

您可以通过像这样在循环内执行函数来为 (i, j) 的“当前”值创建一个新范围

td.click((function (i, j) {
    return function (event) {
        console.log(i, j);
    }
})(i, j));

您可以使用Function.prototype.bind 使其更简洁

td.click(function(i, j, event){
  console.log(i, j);
}.bind(td, i, j));

注意这个.bind解决方案需要ECMAScript 5，所以如果你想支持旧版浏览器，请查看es5-shim

---

看到这个demo

Answer 4

其他选项可以在元素中存储数据。

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

          td.click(function() 
          {
            var position = this.data("position");
            alert(position.row + ' ' + position.column);  // here I want to access to CURRENT i, j variables
          })

          td.appendTo(tr);
      }
  } 

Answer 5

我会将索引存储为属性并将单击处理程序添加到表中：

var tableHtml = '';

for(var i=0; i<5; i++) {
    tableHtml += '<tr>';

    for (var j=0; j<5; j++) {
        tableHtml += '<td data-i="' + i + '" data-j="' + j + '"></td>';
    }

    tableHtml += '</tr>';
}

$('table').append(tableHtml).on('click', 'td', function(ev) {
    var i = this.getAttribute('data-i'),
        j = this.getAttribute('data-j');
});