javascript使用for循环批量注册的事件不能正确获取索引值的解决方法


Posted in Javascript onDecember 20, 2014

本文实例讲述了javascript使用for循环批量注册的事件不能正确获取索引值的解决方法。分享给大家供大家参考。具体分析如下:

可能不少朋友会遇到一个问题,那就是当使用for循环批量注册事件处理函数,然后最后通过事件处理函数获取当前元素的索引值的时候会失败,先看一段代码实例:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

li{

  width:240px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-size:12px;

  height:30px;

}

</style>

<script type="text/javascript">

window.onload=function(){

  var oLis=document.getElementsByTagName("li");

  var oshow=document.getElementById("show");

  for(var index=0;index<oLis.length;index++){

    oLis[index].onclick=function(){

      oshow.innerHTML=index;

    }

  }

}

</script>

</head>

<body>

<div id="show"></div>

<ul>

  <li>只有努力奋斗才会有美好的明天。</li>

  <li>分享互助是进步最大的源动力。</li>

  <li>每一天都是新的,要好好珍惜。</li>

  <li>没有人一开始就是高手,只有努力才有成长的可能</li>

  <li>只有当下的时间是可贵的,下一秒都是虚幻的</li>

</ul>

</body>

</html>

在上面的代码中,当点击li元素的时候弹出值始终是四,我们本来的想法是,点击li元素在div中显示当前li元素的索引值,下面就简单分析一下其中的原因。原因非常的简单,当for循环执行完毕以后,index的值已经变为四,于是也就出现了上面的现象。
代码修改如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

li{

  width:240px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-size:12px;

  height:30px;

}

</style>

<script type="text/javascript">

window.onload=function(){

  var oLis=document.getElementsByTagName("li");

  var oshow=document.getElementById("show");

  for(var index=0;index<oLis.length;index++){

    oLis[index]._index=index;

    oLis[index].onclick=function(){

      oshow.innerHTML=this._index;

    }

  }

}

</script>

</head>

<body>

<div id="show"></div>

<ul>

  <li>只有努力奋斗才会有美好的明天。</li>

  <li>分享互助是进步最大的源动力。</li>

  <li>每一天都是新的,要好好珍惜。</li>

  <li>没有人一开始就是高手,只有努力才有成长的可能</li>

  <li>只有当下的时间是可贵的,下一秒都是虚幻的</li>

</ul>

</body>

</html>

上面的代码实现了我们的要求,当然也可以使用闭包的方式,代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

li{

  width:240px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-size:12px;

  height:30px;

}

</style>

<script type="text/javascript">

window.onload=function(){

  var oLis=document.getElementsByTagName("li");

  var oshow=document.getElementById("show");

  for(var index=0;index<oLis.length;index++){

    (function(index){

      oLis[index].onclick=function(){

        oshow.innerHTML=index;

      }

    })(index)

  }

}

</script>

</head>

<body>

<div id="show"></div>

<ul>

  <li>只有努力奋斗才会有美好的明天。</li>

  <li>分享互助是进步最大的源动力。</li>

  <li>每一天都是新的,要好好珍惜。</li>

  <li>没有人一开始就是高手,只有努力才有成长的可能</li>

  <li>只有当下的时间是可贵的,下一秒都是虚幻的</li>

</ul>

</body>

</html>

希望本文所述对大家基于javascript的web程序设计有所帮助。

Javascript 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
Node.js实现批量去除BOM文件头
Dec 20 #Javascript
javascript删除一个html元素节点的方法
Dec 20 #Javascript
Node.js中调用mysql存储过程示例
Dec 20 #Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 #Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 #Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 #Javascript
js中匿名函数的创建与调用方法分析
Dec 19 #Javascript
You might like
在普通HTTP上安全地传输密码
2007/07/21 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
php中fsockopen用法实例
2015/01/05 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
php HTML无刷新提交表单
2016/04/05 PHP
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
python 使用get_argument获取url query参数
2017/04/28 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
python调用staf自动化框架的方法
2018/12/26 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
华三通信H3C面试题
2015/05/15 面试题
公务员诚信承诺书
2014/05/26 职场文书
中专生自荐信
2014/06/25 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB