JavaScript闭包。在回路中访问当前i，j变量

我尝试使用jQuery动态生成

，我想为每个单元格设置单击处理程序，这样当单击单元格时，弹出窗口将显示单元格的当前索引。如何访问循环中的当前

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);
      }
  }    

for（变量i=0；i<5；i++）{
var tr=$（''）；
对于（var j=0；j<5；j++）{
var td=$（''）；
td.单击（函数（）{
警报（i+“”+j）；//这里我想访问当前的i，j变量
})
td.附录（tr）；
}
}    

将它们引入新的范围将捕获它们当前的价值：

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

---

将其引入新范围将捕获其当前价值：

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

---

通过在循环内执行如下函数，可以为

（i，j）

的“当前”值创建一个新范围

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

您可以使用

注意此

.bind

解决方案需要ECMAScript 5，因此如果您想支持较旧的浏览器，请查看

---

---

参见此

您可以通过在循环内执行如下函数，为

（i，j）

的“当前”值创建一个新范围

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

您可以使用

注意此

.bind

解决方案需要ECMAScript 5，因此如果您想支持较旧的浏览器，请查看

---

---

请参见此

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

  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);
      }
  } 

for（变量i=0；i<5；i++）
{
var tr=$（''）；
对于（var j=0；j<5；j++）
{
var td=$（''）；
数据（“位置”{row:i，column:j}）；
td.单击（函数（）
{
var位置=该数据（“位置”）；
alert（position.row+''+position.column）；//这里我想访问当前的I，j变量
})
td.附录（tr）；
}
} 

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

  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);
      }
  } 

for（变量i=0；i<5；i++）
{
var tr=$（''）；
对于（var j=0；j<5；j++）
{
var td=$（''）；
数据（“位置”{row:i，column:j}）；
td.单击（函数（）
{
var位置=该数据（“位置”）；
alert（position.row+''+position.column）；//这里我想访问当前的I，j变量
})
td.附录（tr）；
}
} 

我将索引存储为属性，并向表中添加一个单击处理程序：

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');
});

var tableHtml=''；
对于（var i=0；i我将索引存储为属性，并向表中添加一个单击处理程序：

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');
});

var tableHtml=''；
对于（var i=0；i，其他答案主要解释了如何解决闭包问题，尽管这些方法不是特别有效，因为它们最终为
i
和
j
的每个可能组合创建了一个新的闭包

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

将
数据
参数传递到调用时的

上述
i
和
j
值将在
event.data中提供

使用
$。每个
迭代，而不是对
使用事件委派而不是每元素处理程序
这比将单独的处理程序分别绑定到每个
更有效

更一般地说，使用
.data（）
存储每个单元格的信息
可以将数据值直接存储在元素上，如果要检索单元格和行索引以外的值，这将非常有效：

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

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

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

将
数据
参数传递到调用时的

上述
i
和
j
值将在
event.data中提供

使用
$。每个
迭代，而不是对
使用事件委派而不是每元素处理程序
这比将单独的处理程序分别绑定到每个
更有效

更一般地说，使用
.data（）
存储每个单元格的信息
可以将数据值直接存储在元素上，如果要检索单元格和行索引以外的值，这将非常有效：

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

我将事件委托给table而不是deadfyi，您总是可以直接从元素获取表行和单元格的索引。因此，在处理程序中，您可以执行
this.cellIndex
来获取
的索引。对于行，只要循环索引与行索引对齐，您就可以执行
this.parentNode.rowIndex
。@user2736012啊，谢谢你提醒我关于
.cellIndex
和
.rowIndex
-我忘记了表中有这些元素，而其他元素要求你通过同级倒数。我将事件委托给表而不是委托给表，你总是可以直接从元素中获取表行和单元格的索引。因此，在你的处理程序中，你可以这样做
this.cellIndex
要获取
的索引。对于行，只要循环索引与行索引对齐，就可以执行
this.parentNode.rowIndex
。@user2736012啊，感谢您提醒
.cellIndex
和
。rowIndex
-我忘了表中有这些，而其他元素没有它要求你通过兄弟姐妹倒数。
function hello（）{return'hi'；}
@naomik$scope.on（“hi”，function（）{alert（“LOL.你好吗？”）}）；@naomik你太可爱了：我也添加了一个演示：）
function hello（）{return hi'；}
@n