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


Posted in Javascript onFebruary 18, 2019

本文实例讲述了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>3water.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();
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
详解vue中axios请求的封装
Apr 08 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
javascript拖曳互换div的位置实现示例
Jun 28 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 #Javascript
深入理解vue-class-component源码阅读
Feb 18 #Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 #Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 #jQuery
详解ES7 Decorator 入门解析
Feb 18 #Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 #jQuery
详解关于微信setData回调函数中的坑
Feb 18 #Javascript
You might like
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
php实现的双色球算法示例
2017/06/20 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
智能钱包:Ekster
2019/11/21 全球购物
经济贸易系毕业生求职信
2014/05/31 职场文书
设计大赛策划方案
2014/06/13 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
初婚初育证明范本
2014/11/24 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
python获取对象信息的实例详解
2021/07/07 Python
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫
Python中re模块的元字符使用小结
2022/04/07 Python
全网非常详细的pytest配置文件
2022/07/15 Python
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers