如何觸發循環中創建的所有元素的onclick？

Question

這是我的代碼：

  var board = document.getElementById("left"); for (var m = 0; m < 5; m++) { var cell = document.createElement('div'); cell.className = "Cell"; cell.style.cssText='background-color:#999999;margin:5px;width:50px;height:100px;'; cell.onclick= function() { cell.innerHTML = "Hello World"; }; cell.name = m; board.appendChild(cell); } 

  <div id="left"></div> 

但是，當我單擊每個div ，“ Hello World”總是顯示在最后一個div 。 如何解決？

Answer 1

在loop中分配cell值時，它將保存最后一個element的值

簡單的解決方案：

在處理函數中使用this ！ 在Event-handler函數中， this是指在其上調用事件的element ！

 var board = document.getElementById("left"); for (var m = 0; m < 5; m++) { var cell = document.createElement('div'); cell.className = "Cell"; cell.style.cssText = 'background-color:#999999;margin:5px;width:50px;height:100px;'; cell.onclick = function() { this.innerHTML = "Hello World"; }; cell.name = m; board.appendChild(cell); } 

 <div id="left"></div> 

或者：使用closure ， returned-function記住創建它的環境！

 var board = document.getElementById("left"); for (var m = 0; m < 5; m++) { var cell = document.createElement('div'); cell.className = "Cell"; cell.style.cssText = 'background-color:#999999;margin:5px;width:50px;height:100px;'; cell.onclick = (function(cell) { return function() { cell.innerHTML = "Hello World"; } })(cell); cell.name = m; board.appendChild(cell); } 

 <div id="left"></div>