Javascript 使用 addEventListener 和 getElementsByClassName 传递元素 ID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42080365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using addEventListener and getElementsByClassName to pass an element id
提问by Michael
I'm defining a list of items from a JSON file and displaying that list on a web page. The intention is for users to click on any item in that list to display more information on that item (information that is held in the same JSON file).
我正在定义来自 JSON 文件的项目列表并在网页上显示该列表。目的是让用户单击该列表中的任何项目以显示有关该项目的更多信息（保存在同一 JSON 文件中的信息）。
All items of that list are members of the same class, and each has a unique id defined from the JSON file. The HTML looks something like this:
该列表的所有项目都是同一类的成员，每个项目都有一个从 JSON 文件定义的唯一 ID。HTML 看起来像这样：
<ul>
<li class="menu" id="bob">Robert Smith</li>
<li class="menu" id="jane">Jane Doe</li>
<li class="menu" id="sue">Susan Carter</li>
</ul>
I was planning to use something along the lines of
我打算使用类似的东西
var userSelection = document.getElementsByClassName('menu');
var userSelection = document.getElementsByClassName('menu');
in concert with
与
userSelection.addEventListener('click', myFunctionToPrintDetails());
userSelection.addEventListener('click', myFunctionToPrintDetails());
but I am not sure how to pass the id from the event listener to the print function in order to determine which details to print.
但我不确定如何将事件侦听器中的 id 传递给打印函数，以确定要打印的详细信息。
I have a lot of experience with HTML/CSS but very little with JSON/AJAX, so possible I'm going about this completely bass-ackwards. If there is a more appropriate way to get this done I'm open to the feedback.
我在 HTML/CSS 方面有很多经验，但在 JSON/AJAX 方面经验很少，所以我可能会完全了解这个问题。如果有更合适的方法来完成这项工作，我愿意接受反馈。
I tried both answers but neither worked. When I log userSelection.length to the console I get 0; when I log userSelection I get:
我尝试了两个答案，但都没有奏效。当我将 userSelection.length 记录到控制台时，我得到 0；当我登录 userSelection 时，我得到：
HTMLCollection(0)
> sue: li#sue.menu
length: 3
> jane: li#jane.menu
> bob: li#bob.menu
> 0: li#bob.menu
> 1: li#jane.menu
> 2: li#sue.menu
回答by Déric Dallaire
var userSelection = document.getElementsByClassName('menu');
for(var i = 0; i < userSelection.length; i++) {
(function(index) {
userSelection[index].addEventListener("click", function() {
console.log("Clicked index: " + index);
})
})(i);
}
As pointed out by @torazaburo in the comments, you can use the following if the browsers you want to support are complying with ECMAScript 6 (ES6), the newest version of JavaScript.
正如@torazaburo 在评论中指出的那样，如果您想要支持的浏览器符合最新版本的 JavaScript 的 ECMAScript 6 (ES6)，您可以使用以下内容。
var userSelection = document.getElementsByClassName('menu');
for(let i = 0; i < userSelection.length; i++) {
userSelection[i].addEventListener("click", function() {
console.log("Clicked index: " + i);
})
}
回答by Villa7_
You can get the id from the element that responded to the click event with this.id:
您可以从响应单击事件的元素中获取 id this.id：
var items = document.getElementsByClassName('menu');
for (var i = 0; i < items.length; i++) {
items[i].addEventListener('click', printDetails);
}
function printDetails(e) {
console.log("Clicked " + this.id);
}<ul>
<li class="menu" id="bob">Robert Smith</li>
<li class="menu" id="jane">Jane Doe</li>
<li class="menu" id="sue">Susan Carter</li>
</ul>回答by Kegan VanSickle
Here's how I would do it. I would first create an array using Object values.
这是我将如何做到的。我将首先使用对象值创建一个数组。
const userSelection = Object.values(document.getElementsByClassName('menu'));
Then I would loop through them using a foreach.
然后我会使用 foreach 循环遍历它们。
userSelection.forEach(link => {
link.addEventListener(event => {
event.preventDefault();
// more code here
});
});
Easy peasy!
十分简单！
