单击HTML列表元素调用javascript函数

Question

我是网络开发的新手,所以这个问题可能对其他人来说太明显了.我想制作一个菜单,当点击菜单项时,需要调用带有一个参数的javascript函数,即项目ID.我想将菜单项呈现为无编号列表.我不明白的是如何将相同的函数绑定到每个列表项,这将由服务器端的PHP脚本生成.

Answer 1

这有望让你朝着正确的方向前进.我所做的只是将"onClick"事件监听器绑定到所有li元素,您可能希望更改绑定的内容,以防您在其他地方使用它们.然后,当他们被点击时,他们会调用myScript获取其ID 的功能并提醒它.

JSFiddle演示

HTML

<ul>
    <li id="1">Link 1</li>
    <li id="2">Link 2</li>
    <li id="3">Link 3</li>
    <li id="4">Link 4</li>
    <li id="5">Link 5</li>
</ul

使用Javascript

var li = document.getElementsByTagName("li");

for(var i = 0;i<li.length;i++){
    li[i].addEventListener("click", myScript);
}

function myScript(e){
    alert(e.target.attributes.id.value);       
}