Question

我正在尝试动态创建a元素并将其设置为带警报的点击功能。我熟悉JavaScript中的闭包，所以我知道我不能像doc.onclick=function() {alert(i);}那样直接调用它，因为它将具有最后i的值。所以我试着立即调用该函数，但它也会立即弹出警报。我该如何解决这个问题？

  for (var i=0; i < 5; ++i) {
       var doc = document.createElement("a");
       doc.innerHTML = i;
       doc.onclick = function(i) {alert(i);}(i);
       document.body.appendChild(doc);
   }

Answer 1

你应该包装这样的东西：

for (var i=0; i < 5; ++i) {
       var doc = document.createElement("a");
       doc.innerHTML = i;
        (function(i){
           doc.onclick = function() {
               alert(i);
           };
        })(i)
       document.body.appendChild(doc);
   }

这种方法会将i添加到关闭，DEMO

Answer 2

你需要在闭包中返回一个函数。正如您所发现的那样，立即调用您的函数将无法正常工作。

for (var i=0; i < 5; ++i) {
   var doc = document.createElement("a");
   doc.innerHTML = i;
   doc.onclick = function(i) {
       return function(){alert(i);};
   }(i);
   document.body.appendChild(doc);
}

Answer 3

将您的代码更改为：

  for (var i=0; i < 5; ++i) {
      var doc = document.createElement("a");
      doc.innerHTML = i;
      document.body.appendChild(doc);
      doc.onclick = function() {alert(this.innerHTML);};
  }

Answer 4

我不确定您在事件处理程序中尝试完成的内容，但可能使用EventTarget.addEventListener：

＆＃13;

for (var i = 0; i < 5; ++i) {
  var doc = document.createElement("a");
  doc.innerHTML = i;
  doc.addEventListener('click', function() {
    alert(this.textContent);
  }, false);
  document.body.appendChild(doc);
}

＆＃13;

在循环中创建元素并使用不同的值

4 个答案: