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

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

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页

打赏作者

狂野的心跳

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值