使用addEventListener和getElementsByClassName传递元素id

Question

我正在从 JSON 文件定义项目列表并在网页上显示该列表。目的是让用户单击该列表中的任何项目以显示有关该项目的更多信息（同一 JSON 文件中保存的信息）。

该列表中的所有项目都是同一类的成员，并且每个项目都有一个从 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>

我打算使用类似的东西

var userSelection = document.getElementsByClassName('menu');

与

一致

userSelection.addEventListener('click', myFunctionToPrintDetails());

但我不确定如何将 id 从事件监听器传递到打印函数以确定要打印哪些详细信息。

我在 HTML/CSS 方面有很多经验，但在 JSON/AJAX 方面却很少，所以我可能会完全搞不懂这个问题。如果有更合适的方法来完成这项工作，我愿意接受反馈。

我尝试了两个答案，但都不起作用。当我将 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

Answer 1

codepen 演示

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

正如 @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);
  })
}

Answer 2

我会这样做。我首先使用对象值创建一个数组。

const userSelection = Object.values(document.getElementsByClassName('menu'));

然后我会使用 foreach 循环它们。

userSelection.forEach(link => {
    link.addEventListener('click', (event) => {
        event.preventDefault();
        // more code here
    });
});

简单易行！

Answer 3

您可以通过

this.id

从响应点击事件的元素中获取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>

Answer 4

<ul id = "menuList">
   <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>


// JS - Event Bubbling
const menuList= document.getElementById("menuList");
menuList.addEventListener("click", function (e) {
        console.log(e.target); // log clicked element 
});

Answer 5

这是我一直使用的较短版本：

[...(document.getElementsByClassName('__MYCLASSNAME__'))].forEach(d => {
  d.addEventListener('click', MYFUNCTION__);
})