脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript使用for循环批量注册的事件不能正确获取索引值的解决方法

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

 更新时间：2014年12月20日 11:26:04   投稿：shichen2014  
这篇文章主要介绍了javascript使用for循环批量注册的事件不能正确获取索引值的解决方法,对比分析了出现问题的代码与修改后的代码,并给出了采用闭包实现的方法,具有一定的参考借鉴价值,需要的朋友可以参考下

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

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

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<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://www.jb51.net/" />
<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://www.jb51.net/" />
<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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • Bootstrap下拉菜单Dropdowns的实现代码

    Bootstrap下拉菜单Dropdowns的实现代码

    这篇文章主要为大家详细介绍了Bootstrap下拉菜单Dropdowns的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • CascadeView级联组件实现思路详解(分离思想和单链表)

    CascadeView级联组件实现思路详解(分离思想和单链表)

    本文介绍自己最近做省市级联的类似的级联功能的实现思路，为了尽可能地做到职责分离跟表现与行为分离，这个功能拆分成了2个组件并用到了单链表来实现关键的级联逻辑，下一段有演示效果的gif图
    2016-04-04
  • JavaScript this使用方法图解

    JavaScript this使用方法图解

    这篇文章主要介绍了JavaScript this使用方法图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • D3.js实现散点图和气泡图的方法详解

    D3.js实现散点图和气泡图的方法详解

    这篇文章将会给大家介绍了另外两种可视化图表，利用D3.js实现散点图和气泡图，文章通过多个方面介绍的非常详细，下面来一起看看吧。
    2016-09-09
  • 详解如何在Javascript中使用Object.freeze()

    详解如何在Javascript中使用Object.freeze()

    这篇文章主要介绍了详解如何在Javascript中使用Object.freeze()，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • 详谈ES6中的迭代器(Iterator)和生成器(Generator)

    详谈ES6中的迭代器(Iterator)和生成器(Generator)

    下面小编就为大家带来一篇详谈ES6中的迭代器(Iterator)和生成器(Generator)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • javascript检测页面是否缩放的小例子

    javascript检测页面是否缩放的小例子

    简单写了下，只测试了chrome，道理很简单，其他浏览器自行扩充。
    2013-05-05
  • JavaScript设置弹出式独立窗口页面和window的方法举例详解

    JavaScript设置弹出式独立窗口页面和window的方法举例详解

    window.open是网页中经常遇到的弹出窗口代码,不是网络中比较反感的那类弹出代码,下面这篇文章主要给大家介绍了关于JavaScript设置弹出式独立窗口页面和window的方法,需要的朋友可以参考下
    2024-01-01
  • 微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能

    微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能

    这篇文章主要介绍了微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能，利用小程序事件处理的api，分别读取触摸开始，触摸移动时，触摸结束的X/Y坐标，根据差值来改变整个卡片的位置，具体实例代码跟随小编一起看看吧
    2019-12-12
  • ES6的解构赋值实例详解

    ES6的解构赋值实例详解

    解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这篇文章主要介绍了ES6的解构赋值的实例代码 ,需要的朋友可以参考下
    2019-05-05

最新评论