我正在撰寫一個簡單的功能，我需要在其中獲取所選元素的 id。我的 JS 有點生疏，它可能很明顯，但我卡住了。我只能在第一次執行函式時選擇，但在初始選擇后它似乎不起作用。
<ul id="cntyByState" class="dropdown-menu" aria-labelledby="dropState">
<li id="AZ" class="dropdown-item">Arizona</li>
<li id="NM" class="dropdown-item">New Mexico</li>
<li id="TX" class="dropdown-item">Texas</li>
</ul>
var mst = document.querySelector("#cntyByState li.dropdown-item")
mst.onclick = function(){getCnts(mst)};
function getCnts(em) {
console.log(em.id);
}
我錯過了什么？
uj5u.com熱心網友回復：
querySelector只選擇一個節點，嘗試querySelectorAll迭代節點串列。
var mst = document.querySelectorAll("#cntyByState li.dropdown-item")
mst.forEach(li => {
li.onclick = function() {
getCnts(this);
};
});
function getCnts(em) {
console.log(em.id);
}
uj5u.com熱心網友回復：
function onClickItem() {
console.log(this.id);
}
const dropdownItems = document.querySelectorAll("#dropdown > li");
dropdownItems.forEach((item) =>
item.addEventListener("click", onClickItem)
);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<ul class="dropdown" id="dropdown">
<li id="1">mango</li>
<li id="2">orange</li>
<li id="3">banana</li>
</ul>
</body>
</html>這是一個非常簡單直接的示例，可以輕松解決您的問題。我希望這會奏效
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/311104.html
標籤：javascript
上一篇：如何提高嵌套for回圈的性能