多个li标签,点击获取其index序号(索引值)

2021年9月24日 28点热度 0条评论 来源: 狂野的心跳

 在很多项目中,特别是项目中菜单栏,一般都是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].οnclick=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>

    原文作者:狂野的心跳
    原文地址: https://blog.csdn.net/guozhangqiang/article/details/79207877
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。