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树形控件脚本代码
Jul 24 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
浅谈js的异步执行
Oct 18 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 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
xml+php动态载入与分页
2006/10/09 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
深入理解js promise chain
2016/05/05 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
python中退出多层循环的方法
2018/11/27 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
实习自我鉴定模板
2013/09/28 职场文书
学生学习总结的自我评价
2013/10/22 职场文书
移动通信专业自荐信范文
2013/11/12 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
环保倡议书范文
2014/05/12 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
名人演讲稿范文
2014/09/16 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
入队仪式主持词
2015/07/04 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers