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 相关文章推荐
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 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
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
解析php中curl_multi的应用
2013/07/17 PHP
php中异常处理方法小结
2015/01/09 PHP
php中session与cookie的比较
2015/01/27 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
python定向爬取淘宝商品价格
2018/02/27 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
人事专员工作职责
2014/02/22 职场文书
党员政治学习材料
2014/05/14 职场文书
爱心捐款感谢信
2015/01/20 职场文书
大学生年度个人总结
2015/02/15 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
详解Laravel制作API接口
2021/05/31 PHP
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js