list 带有 ul li 的 onclick 事件以触发函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17935555/
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
onclick event with ul li to fire a function
提问by circariem
I'm new to coding and I need help with adding an onclick event to my list (which is supposed to work as a drop-down menu)-
我是编码新手，我需要帮助将 onclick 事件添加到我的列表（应该作为下拉菜单）-
This is the code for my list:
这是我的列表的代码：
<div class="click-nav">
<ul class="clicker">
<ul>
<li><a href="#">shake</a></li>
<li><a href="#">shrink</a></li>
<li><a href="#">melt</a></li>
<li><a href="#">disperse</a></li>
</ul>
</ul>
</div>
I want to make it so that when one of these items is selected, a function is fired (which calls a bunch of images specific to the category selected to be placed in a div).
我想让它在选择这些项目中的一个时触发一个函数（它调用一组特定于所选类别的图像以放置在 div 中）。
I've tried it also with the select option and it was working perfectly, but I have to change it because its stubborn design:
我也用 select 选项尝试过它，它运行得很好，但我必须改变它，因为它的顽固设计：
<label>
<select name="alphabets" id="typeface" onchange="myType();">
<option value="shake" selected>shake</option>
<option value="shrink">shrink</option>
<option value="melt">melt</option>
<option value="disperse">disperse</option>
<option value="disintegrate">disintegrate</option>
</select>
</label>
Thanks in advance for the help!
在此先感谢您的帮助！
回答by A Mind United
You could just add onclick to each '' and call a different function for each one:
您可以将 onclick 添加到每个 '' 并为每个函数调用不同的函数：
<script>
function shake(){
alert('Shake');
}
function shrink(){
alert('Shrink');
}
</script>
<div class="click-nav">
<ul class="clicker">
<ul>
<li><a href="#" onclick=shake();>shake</a></li>
<li><a href="#"onclick=shrink();>shrink</a></li>
<li><a href="#">melt</a></li>
<li><a href="#">disperse</a></li>
</ul>
</ul>
</div>
回答by aditya
See this.
看到这个。
<html>
<div id="name">text</div>
<ul><li onclick="chaangeEvenet(this)">A </li><li onclick="chaangeEvenet(this)">B </li><li onclick="chaangeEvenet(this)">C </li></ul>
</html>
<script>
var namefield=document.getElementById("name");
function chaangeEvenet(e){
namefield.innerHTML=e.innerHTML;
}
</script>
