javascript - 如何在同一循环中按 Id 定位循环元素？

Question

这就是我想要做的：

var numArray = ["One","Two","Three","For","Five","Six"];

for (i = 0, i < numArray.length; i++) {
   document.getElementById('results').innerHTML += <div id='listResult_"+[i]+"'></div><br>;

   var target = document.getElementById('listResult_'+[i]);
   document.addDomListener(target, 'mouseover', function() {
      alert("listResult_"+[i]);
   });
}

它仅向最后一个目标 ID (listResult_5) 发出警报。如何单独针对所有六个？

Answer 1

尝试：

for (i = 0, i < numArray.length; i++) {
   document.getElementById('results').innerHTML += "<div id='listResult_"+[i]+"'></div><br>";

   var target = document.getElementById('listResult_'+[i]);    

    (function(e) {
       document.addDomListener(target, 'mouseover', function() {
         alert("listResult_"+[e]);
       });
    })(i);
}

Answer 2

每次你分配任何东西时，innerHTML你都会破坏那里的元素。由于您正在使用+=您，因此您可以创建新元素……但是您附加到它们的事件处理程序已经丢失。改为使用标准 DOM 方法创建和附加元素。

此外，i是一个变量。它将是循环完成时分配的最后一个值。

而是从上下文中获取数据。

您的for循环语法也不正确。

addDomListener似乎是谷歌地图的一项功能。用于addEventListenerHTML。

var numArray = ["One","Two","Three","For","Five","Six"];

for (var i = 0; i < numArray.length; i++) {
   var myDiv = document.createElement('div');
   myDiv.id = "listResult_"+[i];
   myDiv.appendChild(document.createTextNode(myDiv.id));
   document.getElementById('results').appendChild(myDiv);
   // Don't append a line break between block containers. Use CSS isntead.
   myDiv.addEventListener('mouseover', function() {
      alert(this.id);
   });
}​