我正在定义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>
Run Code Online (Sandbox Code Playgroud)
我打算用一些东西
var userSelection = document.getElementsByClassName('menu');
与...一致
userSelection.addEventListener('click', myFunctionToPrintDetails());
但我不知道如何将id从事件监听器传递给print函数以确定要打印的细节.
我对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
Run Code Online (Sandbox Code Playgroud)