将值传递给onclick函数

Question

如果我使用循环创建大量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)};

< p >（对于Internet Explorer而言，target需要是srcElement。）我很想知道是否有任何方法可以创建该函数而无需像这样将ID添加到元素中。< /p >

- user181548

Answer 1

i的值在每次循环迭代时都会改变。你需要一个闭包来捕获i的值：点击这里了解更多。

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

- Crescent Fresh

---

你的括号使用不正确，但这个想法可行。谢谢。 - user181548

Answer 2

如果您编写一个构建处理程序函数的函数，您可以使用该函数提供的新作用域来确保获得所需的数字。例如：

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

- Tim

Answer 3

如果我是你，我会使用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);
  });

});

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

- nightingale2k1

---

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