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 相关文章推荐
javascript new fun的执行过程
Aug 05 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
javascript实现简易计算器
Feb 01 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
Python文件去除注释的方法
2015/05/25 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
MIS软件工程师的面试题
2016/04/22 面试题
财务出纳员岗位职责
2013/11/26 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
建筑学专业自荐书
2014/07/09 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
2014年卫生工作总结
2014/11/27 职场文书
病危通知书样本
2015/04/17 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
Python开发五子棋小游戏
2022/04/28 Python