多个li标签，点击获取其index序号（索引值）

最新推荐文章于 2022-02-10 16:36:42 发布

狂野的心跳

最新推荐文章于 2022-02-10 16:36:42 发布

阅读量4.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：索引值对应原生js

本文链接：https://blog.youkuaiyun.com/guozhangqiang/article/details/79207877

js 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何使用原生JavaScript来为HTML中的菜单项添加点击事件，并通过这些事件获取被点击菜单项的索引值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在很多项目中，特别是项目中菜单栏，一般都是li标签，当我们需要进行点击事件，需要判断点击的是哪一个菜单，第几个菜单

，因此，我们需要获取其索引值（现在框架都会自动返回值，这里就用原生js实现）

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>获取索引值</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#test li{
			cursor: pointer;
		}

	</style>
</head>
<body>
	<ul id="test">  
	    <li>这是第一条</li>  
	    <li>这是第二条</li>  
	    <li>这是第三条</li>  
	</ul> 
	<script>
//		function test(){
//	       var test=document.getElementById('test');
//	       var testLi=document.getElementById('test').getElementsByTagName('li');
//	       for(var i=0;i<testLi.length;i++){
//	            testLi[i].setAttribute('index',"这是第"+(i+1)+"条");
//	            testLi[i].onclick=function(){
//	              alert(this.getAttribute('index'));
//	            }
//	        }
//	    };
//	    test();
	     /////////////////////////////////或者/////////////////////////////////
	     var testLi=document.getElementById('test').getElementsByTagName('li');
	     for(var i=0;i<testLi.length;i++) {
	         testLi[i].addEventListener("click", function (num){
	             return function (){
	                alert("这是第"+(num+1)+"条");
	             }
	         }(i))
	     }
	</script>
</body>
</html>