JS实现点击li标签弹出对应的索引功能【案例】
作者：庚中 时间：2024-04-17 10:24:23
本文实例讲述了JS实现点击li标签弹出对应的索引功能。分享给大家供大家参考，具体如下：
需求:点击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.jb51.net 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程序设计有所帮助。
来源：https://blog.csdn.net/xiaodi520520/article/details/83270580
标签：JS,点击,li,索引
0
投稿猜你喜欢
python memory_profiler库生成器和迭代器内存占用的时间分析
2023-01-06 21:25:02
JavaScript实现相册弹窗功能（zepto.js)
2024-04-19 10:42:49
跟老齐学Python之复习if语句
2022-03-20 19:33:20
python如何利用matplotlib绘制并列双柱状图并标注数值
2022-08-06 22:00:33
Ubuntu Server 20.04 LTS 环境下搭建vim 编辑器Python IDE的详细步骤
2023-06-02 05:13:18
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2024-04-10 13:46:00
python实现坦克大战游戏 附详细注释
2023-06-26 07:58:13
利用Anaconda简单安装scrapy框架的方法
2021-05-28 15:47:13
MySQL存储引擎简介及MyISAM和InnoDB的区别
2024-01-26 23:53:17
javascript模拟鼠标自动点击链接
2007-11-03 19:08:00
Python collections.deque双边队列原理详解
2022-02-21 04:25:00
一个表单焦点效果函数
2008-01-19 10:59:00
JS轮播图中缓动函数的封装
2023-08-22 20:50:11
编写一个asp代码执行器
2007-09-24 16:05:00
Python实现将n个点均匀地分布在球面上的方法
2021-02-21 20:56:33
golang 实用库gotable的具体使用
2024-04-27 15:31:48
Javascript网页抢红包外挂实现分享
2024-04-16 09:36:02
如何让vsCode显示中文界面
2023-05-31 10:22:50
pyecharts如何实现显示数据为百分比的柱状图
2021-06-27 17:11:52
Windows11下MySQL 8.0.29 安装配置方法图文教程
2024-01-24 09:20:40
