JS实现点击li标签弹出对应的索引功能【案例】

2024-05-06 16:48:12

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现点击li标签弹出对应的索引功能。分享给大家供大家参考，具体如下：

需求:点击li标签,弹出对应的索引

先看效果:

JS,li标签,索引

html结构:

<ul id="ul1">  <li>我是li标签1</li>  <li>我是li标签2</li>  <li>我是li标签3</li>  <li>我是li标签4</li>  <li>我是li标签5</li></ul>

方法一:直接往标签里添加索引的方法

var list=document.getElementById('ul1').children;//获取所有的li标签for(var i=0;i<list.length;i++){//遍历每一个li标签    list[i].setAttribute('index',i+1); //给每一个li标签添加索引    list[i].onclick=function ( ) {      alert("您点击了第"+this.getAttribute('index')+"个li标签");//获取添加的li标签的元素值    }}

完整测试示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.vevb.com JS点击li标签,弹出对应的索引</title></head><body><ul id="ul1">  <li>我是li标签1</li>  <li>我是li标签2</li>  <li>我是li标签3</li>  <li>我是li标签4</li>  <li>我是li标签5</li></ul><script>var list=document.getElementById('ul1').children;//获取所有的li标签for(var i=0;i<list.length;i++){//遍历每一个li标签    list[i].setAttribute('index',i+1); //给每一个li标签添加索引    list[i].onclick=function ( ) {      alert("您点击了第"+this.getAttribute('index')+"个li标签");//获取添加的li标签的元素值    }}</script></body></html>

方法二:使用闭包的方法

var list=document.getElementById('ul1').children;//获取所有的li标签for(var i=0;i<list.length;i++) {//遍历每一个li标签   function outer ( ) {     var num=i+1;     function inner ( ) {       alert("您点击了第"+num+"个li标签");     }     return inner;   }   //给每一个li标签注册单击事件   list[i].onclick=outer();}

测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：详解ES7 Decorator 入门解析

下一篇：JS基于开关思想实现的数组去重功能【案例】