JS实现点击li标签弹出对应的索引功能【案例】
作者：庚中 发布时间：2024-04-17 10:24:23
标签：JS,点击,li,索引
本文实例讲述了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
0
投稿猜你喜欢
- 守护进程1、守护子进程主进程创建守护进程 其一：守护进程会在主进程代码执行结束后就终止其二：守护进程内无法再开启子进程,否则抛出异常：Ass
- 相信做过自动化运维的同学都用过REST API接口来完成某些动作。API是一套成熟系统所必需的接口，可以被其他系统或脚本来调用，这也是自动化
A.课程内容本节课主要学习函数的返回值returm，通过学习编写一个汇率转换器程序。B.知识点(1)定义函数(2)调用函数(3)返回值C.用- 当我们花费大量的精力训练完网络，下次预测数据时不想再（有时也不必再）训练一次时，这时候torch.save(),torch.load()就要
- def ddns():"""用当前ip更新ddns"""headers = {&
- 目录一、图片处理（一）图片采集（二）图片装载（三）完整代码二、初始化pygame相关参数（一）设置初始化参数（二）设置为全屏显示：三、核心模
- 我就废话不多说了，直接上代码吧！import torchimport torch.nn.functional as Fimport nump
- 实例如下：<!DOCTYPE html><html><head><script src="
- fromkeys()方法类似于列表的浅拷贝首先用该方法创建一个字典dict_ = dict.fromkeys(('a',&#
- 一、服务器环境1、系统windows2003 中文企业版 sp22、mysql 5.1.553、php 5.2.174、IIS 6.0二、破
- 作用：调用方法改为调用对象， 比如 ： p.set_name() 改为 p.set_name区别：前者改变get方法，后者改变set方法效果
- 阅读Chapter 1 清单Chapter 2 标题总览:不但所有网页都需要有标题,而且如果标记正确的话,他们能为网页设计和易用性
- 本文实例讲述了js实现ajax分页的方法。分享给大家供大家参考，具体如下：<!DOCTYPE html PUBLIC "-/
- 目录 一、环境配置 二、ASP对Excel的基本操作 三、ASP操作Excel生成数据表 四、ASP操作Excel生成Chart图 五、服务
- 什么是冗余字段？在设计数据库时，某一字段属于一个表，但它又同时出现在另一个或多个表，且完全等同于它在其本来所属表的意义表示，那么这个字段就是
- 本文研究的主要是python实现Decorator模式，具体介绍如下。一般来说，装饰器是一个函数，接受一个函数（或者类）作为参数，返回值也是
- 注：所谓n位数“水仙花数”是指一个n数，其各位数字n次方和等于该数本身。如三位数“水仙花数”是指一个三位数，其各位数3次方和等于该数本身。一
- 题目一个整数，它加上100后是一个完全平方数，再加上168又是一个完全平方数，请问该数是多少？程序分析因为168对于指数 * 来说实在太小了，
- 下表列出 SQL Server 查询分析器提供的所有键盘快捷方式。活动 快捷方式 书签：清除所有书签。 CTRL-SHIFT-F2
- 题目大意问 太阳神有一牛群，由白、黑、花、棕四种颜色的公、母牛组成，其间关系如下，求每种牛的个数。公牛中，白牛多于棕牛，二者之差为
