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 相关文章推荐
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
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
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
正则表达式替换html元素属性的方法
2016/11/26 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
Python迭代用法实例教程
2014/09/08 Python
python实现封装得到virustotal扫描结果
2014/10/05 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
Python提取频域特征知识点浅析
2019/03/04 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
水果超市创业计划书
2014/01/27 职场文书
新教师工作感言
2014/02/16 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
家长会欢迎词
2015/01/23 职场文书
八年级作文之友情
2019/11/25 职场文书