我剛剛在試驗 JavaScript 并且正在嘗試這段代碼。
var elements = document.getElementsByTagName("p");
var n = elements.length; // Should be: 10
for (var i = 0; i < n; i ) {
elements[i].onclick = function () {
console.log("This is element #" i);
};
}<p>Element: #1</p>
<p>Element: #2</p>
<p>Element: #3</p>
<p>Element: #4</p>
<p>Element: #5</p>但是，當代碼運行時，會發生一些奇怪的事情。基本上，例如，如果您單擊元素#1，它會說您單擊了元素#5。
這是我很想知道的：
- 為什么會出現這種情況？
- 有解決辦法嗎？
uj5u.com熱心網友回復：
您可以使用下面的代碼來更正這些問題。
var elements = document.getElementsByTagName("p");
var n = elements.length;
function makeHandler(num) {
return function() {
console.log("This is element #" num);
};
};
for (var i = 0; i < n; i ) {
elements[i].onclick = makeHandler(i 1);
}
讓我們解釋一下代碼。
基本上，在這段代碼中，makeHandler每次我們通過回圈時都會立即執行，每次接收當前的值i 1并將其系結到一個作用域num變數。
外部函式 ( makeHandler) 回傳內部函式（匿名函式）（它也使用這個作用域num變數）并且元素onclick被設定為該內部函式。
這確保了每個人都onclick接收和使用正確的i值（通過作用域num變數）。
uj5u.com熱心網友回復：
將 var 更改為 let：
for (let i = 0; i < n; i ) {
elements[i].onclick = function () {
console.log("This is element #" i);
};
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/469000.html
標籤：javascript html for循环 dom
上一篇：如何在FloatLayout()上更改Kivy中的螢屏？
下一篇：React組件的問題