使用addEventListener和getElementsByClassName来传递元素id

18 浏览
0 Comments

使用addEventListener和getElementsByClassName来传递元素id

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

该列表的所有项目都是同一个类的成员，并且每个项目都有一个在JSON文件中定义的唯一id。HTML代码大致如下：

我计划使用类似以下方式的代码：

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

0