脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JS原生数据双向绑定实现代码

    JS原生数据双向绑定实现代码

    本文通过实例代码给大家介绍了JS原生数据双向绑定问题，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
    2017-08-08
  • 微信小程序使用npm包的方法步骤

    微信小程序使用npm包的方法步骤

    这篇文章主要介绍了微信小程序使用npm包的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 浏览器检测JS代码(兼容目前各大主流浏览器)

    浏览器检测JS代码(兼容目前各大主流浏览器)

    这篇文章主要介绍了浏览器检测JS代码，兼容目前各大主流浏览器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JS+CSS实现下拉列表框美化效果（3款）

    JS+CSS实现下拉列表框美化效果（3款）

    这篇文章主要介绍了JS+CSS实现美化的下拉列表框效果,涉及javascript针对下拉列表框样式的相关操作技巧,三款下拉菜单简单大方,需要的朋友可以参考下
    2015-08-08
  • JavaScript中的全局属性与方法深入解析

    JavaScript中的全局属性与方法深入解析

    这篇文章主要给大家介绍了关于JavaScript中全局属性与方法的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2020-06-06
  • javascript学习总结之js使用技巧

    javascript学习总结之js使用技巧

    本篇文章给大家分享javascript学习总结之js使用技巧，都是精华喔～小伙伴快来学习吧。
    2015-09-09
  • JS实现颜色梯度与渐变效果完整实例

    JS实现颜色梯度与渐变效果完整实例

    这篇文章主要介绍了JS实现颜色梯度与渐变效果,结合完整实例形式分析了js颜色渐变所涉及的数学运算与页面样式动态操作相关技巧,需要的朋友可以参考下
    2016-12-12
  • 微信小程序图片选择区域裁剪实现方法

    微信小程序图片选择区域裁剪实现方法

    本篇文章主要介绍了微信小程序图片选择区域屏裁剪实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • js实现可旋转的立方体模型

    js实现可旋转的立方体模型

    这里给大家分享的是通过js脚本来控制页面中的正方体转动特效，用户可以点击按钮向右转动，也可以向下转动，结合自己的需求控制即可。效果非常棒，这里推荐给大家
    2016-10-10
  • 使用html2Canvas打印高清PDF的原理解析

    使用html2Canvas打印高清PDF的原理解析

    这篇文章主要为大家详细介绍了如何使用html2Canvas打印高清PDF的效果，文中的示例代码讲解详细，具有一定的参考价值，需要的可以了解一下
    2023-07-07

最新评论