使用for循環設置事件處理程序

我在jsfiddle上搞了一些javascript，並遇到了一個奇怪的問題。我似乎無法弄清楚，爲什麼我通過我無法設置onclick事件處理循環：使用for循環設置事件處理程序

HTML：在DOM執行

<table border="1" cellspacing="1" width="500"> 
    <tr id="headerRow"> 
     <td>Header1</td> 
     <td>Header2</td> 
     <td>Header3</td> 
     <td>Header4</td> 
    </tr> 
    <tr> 
     <td>books</td> 
     <td>red</td> 
     <td>peas</td> 
     <td>321</td> 
    </tr> 
    <tr> 
     <td>tapes</td> 
     <td>blue</td> 
     <td>jello</td> 
     <td>654</td> 
    </tr> 
</table>

JS準備：

var arr = document.getElementById('headerRow') 
    .getElementsByTagName("td"); 

// Why does this work?? 
/*arr[0].onclick = function() { alert(arr[0].innerHTML); }; 
arr[1].onclick = function() { alert(arr[1].innerHTML); }; 
arr[2].onclick = function() { alert(arr[2].innerHTML); }; 
arr[3].onclick = function() { alert(arr[3].innerHTML); }; 
*/ 

//But this doesn't???? 
for(var i = 0; i < arr.length; i++) { 
    arr[i].onclick = function() { alert(arr[i].innerHTML); }; 
}

http://jsfiddle.net/xzmMj/4/

來源

2012-10-22 Nick Rolando

認爲這和你要找的是一樣的嗎？ http://stackoverflow.com/questions/6487366/how-to-generate-event-handlers-with-loop-in-javascript – Darren

i將不會包含您正在打算的「當前索引」，而是最後一個值爲i，即arr.length

一個快速ñ骯髒的解決辦法是做這樣的事情

for(var i = 0; i < arr.length; i++) { 
    (function(_i){ 
     arr[_i].onclick = function() { alert(arr[_i].innerHTML); }; 
    })(i); 
}

這樣做是抓住了一個新的變量_i你執行該語句的關閉範圍內的i的電流值，所以它會停留在周圍，併成爲您每次調用onclick處理程序時所期望的值。

來源

2012-10-22 18:09:12 hexist

有趣的..謝謝你。 –

您需要關閉，否則arr[i]在另一個範圍內執行並炸燬。

for(var i = 0; i < arr.length; i++) { 

    arr[i].onclick = function(text) { 
     return function() { 
      alert(text); 
     }; 
    }(arr[i].innerHTML); 
}

http://jsfiddle.net/xzmMj/5/

來源

2012-10-22 18:12:30 jbabey

很酷，謝謝。說得通。我必須得到更加友好的「閉合」 –

這是一個常見錯誤。 i是您在for循環中遞增的全局變量。當循環結束時，我將等於4.然後，在您的點擊處理函數中，您正試圖顯示arr[i].innerHTML，它現在是arr[4].innerHTML。 arr[4]顯然不存在，所以你得到一個錯誤。

要簡單修復，請將alert(arr[i].innerHTML)更改爲alert(this.innerHTML)。在點擊處理函數的上下文中，this將引用<TD>元素。

來源

2012-10-22 18:15:31 glomad

沒有解決它 –

使用for循環設置事件處理程序

回答

相關問題