将值传递给 onclick [重复]答案

【问题标题】：Passing values to onclick [duplicate]将值传递给 onclick [重复]
【发布时间】：2010-12-07 15:30:41
【问题描述】：

如果我使用循环创建大量 HTML 元素，例如

for (i= 1; i < 100; i++) {
    var my_element = document.createElement ("td");
    row.appendChild (my_element);
    my_element.onclick = function () {my_function (i));
}

那么当点击元素时，传递给my_function的i的值总是100，不管是什么数字元素调用它。我已经通过使用解决了这个问题

my_element.id = "something"+i;
my_element.onclick = function (e) {my_function (e.target.id)};

（对于 Internet Explorer，target 显然需要为 srcElement。）我很想知道是否有任何方法可以创建函数而不必像这样将 ID 添加到元素中。

【问题讨论】：

标签： javascript loops closures

【解决方案1】：

如果我是你，我会使用 Jquery（或原型或任何可用的 js 框架）

您应该在每个元素上添加诸如 myid 之类的属性，以便在单击时可以检索它。

for(i=1; i ++ ; i<100){
   var myelement = "<td myid='something"+i+"' class='myTD'></td>" ;
   row.append(myelement);
}

.... 

$(document).ready(function(){
  $('.myTD').click(function(){
     var id = $(this).attr('myid');
     my_function(id);
  });

});

我在我的网络应用程序上做了这个技巧:)

【讨论】：

你的回答完全错误，没有抓住问题的重点。

【解决方案2】：

i 的值随着循环的每次迭代而变化。 You need a closure to capture the value of i:

(function(i) {
    my_element.onclick = function () {my_function (i)};
}(i))

【讨论】：

您的包围是错误的，但这个想法奏效了。谢谢。

【解决方案3】：

如果你编写了一个构建处理函数的函数，你可以使用新的作用域来确保你得到你想要的数字。例如：

function BuildHandler (i) { return function () { alert(i); };

for (i= 1; i < 100; i++) {
    var my_element = document.createElement ("td");
    row.appendChild (my_element);
    my_element.onclick = BuildHandler(i);
}

【讨论】：

这是一个非常好的主意。谢谢。