我在使用for ... of回圈向檔案的每個按鈕添加事件偵聽器時遇到問題。
var buttons = document.getElementsByTagName("button");
for (b of buttons) {
b.addEventListener("click", function() {
var n = document.createElement("span");
n.innerHTML = "new";
b.parentElement.appendChild(n);
b.style.display = "none";
});
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<header>
<h1>Heading</h1>
</header>
<main>
<dl>
<dt>Title</dt>
<dd>Description</dd>
<dt>Title</dt>
<dd><button>add content</button></dd>
<dt>Title</dt>
<dd>Description</dd>
</dl>
<dl>
<dt>Title</dt>
<dd>Description</dd>
<dt>Title</dt>
<dd><button>add content</button></dd>
<dt>Title</dt>
<dd>Description</dd>
</dl>
</main>
</body>
</html>上面的例子只導致在n最后一個之后的附錄button，而不是第一個。為什么會這樣，如何修復？是一個for .. of回圈，即使這樣做的正確方法？
uj5u.com熱心網友回復：
從以上兩個評論...
“都舍不得虧的模式......請問OP意味著相同或相當的完全相同或非常相似。對于后一種情況（S）的OP則需要提供事件偵聽器作為一個參考（可能是函式宣告），而不是總是另一個完全實作的匿名回呼函式。”
“如果 OP 確實使用
querySelectorAll了 OP，則可以訪問forEach迭代回傳的NodeList......document.querySelectorAll("button").forEach(/* ... */);”
除了已經說過的，OP 可能會currentTarget從提供的event物件中檢索當前的單擊按鈕。
function handleContentCreation(evt) {
const button = evt.currentTarget;
const content = document.createElement('span');
content.textContent = 'new';
button.parentElement.appendChild(content);
button.style.display = 'none';
}
document
.querySelectorAll('button')
.forEach(elmNode =>
elmNode.addEventListener('click', handleContentCreation)
);:not(dd) { margin: 0!important; padding: 0!important }
body { zoom: .9; }
h1 { font-size: 1.2em; }<header>
<h1>Heading</h1>
</header>
<main>
<dl>
<dt>Title</dt>
<dd>Description</dd>
<dt>Title</dt>
<dd><button>add content</button></dd>
<dt>Title</dt>
<dd>Description</dd>
</dl>
<dl>
<dt>Title</dt>
<dd>Description</dd>
<dt>Title</dt>
<dd><button>add content</button></dd>
<dt>Title</dt>
<dd>Description</dd>
</dl>
</main>uj5u.com熱心網友回復：
問題是這種方式的“for”不起作用。你應該像這樣使用它：
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i ) {
b[i].addEventListener("click", function() {
var n = document.createElement("span");
n.innerHTML = "new";
b[i].parentElement.appendChild(n);
b[i].style.display = "none";
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/339346.html
標籤：javascript html for循环 事件监听器 html集合