使用 Javascript 返回所選元素的 ID

Question

我正在編寫一個簡單的功能，我需要在其中獲取所選元素的 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);
}

我錯過了什么？

Answer 1

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);
}

Answer 2

 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>

這是一個非常簡單直接的示例，可以輕松解決您的問題。 我希望這會奏效

使用 Javascript 返回所選元素的 ID

問題描述

2 個解決方案

解決方案1
1 2021-10-13 04:39:31

解決方案2
1 已采納 2021-10-13 05:09:16

使用 Javascript 返回所選元素的 ID

問題描述

2 個解決方案

解決方案1 1 2021-10-13 04:39:31

解決方案2 1 已采納 2021-10-13 05:09:16

解決方案1
1 2021-10-13 04:39:31

解決方案2
1 已采納 2021-10-13 05:09:16