使用 Javascript 返回所选元素的 ID
[英]Return ID of a selected element with Javascript
问题描述
I am writing a simple functionality where I need to get an id of a selected element.
我正在编写一个简单的功能，我需要在其中获取所选元素的 id。 My JS is a bit rusty and it's probably pretty obvious but I'm stuck.I'm able to select only the very first time I execute the function but it does not seem to work after the initial selection.我的 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);
}
What am I missing?我错过了什么？
2 个解决方案
解决方案1
1 2021-10-13 04:39:31
querySelector selects one node only, try querySelectorAll and iterate the node list. 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);
}
解决方案2
1 已采纳 2021-10-13 05:09:16
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>
This is very simple and straight forward example that will easily resolve your problem.这是一个非常简单直接的示例，可以轻松解决您的问题。 I hope this will work我希望这会奏效
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.