首页 > 代码库 > 使用for循环批量注册的事件不能正确获取索引值
使用for循环批量注册的事件不能正确获取索引值
使用for循环批量注册的事件不能正确获取索引值:
可能不少朋友会遇到一个问题，那就是当使用for循环批量注册事件处理函数，然后最后通过事件处理函数获取当前元素的索引值的时候会失败，先看一段代码实例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" utf-8"> 5 <meta name="author" content="http://www.softwhy.com/" /> 6 <title>蚂蚁部落</title> 7 <style type="text/css"> 8 li{ 9 width:240px;10 overflow:hidden;11 text-overflow:ellipsis;12 white-space:nowrap;13 font-size:12px;14 height:30px;15 }16 </style>17 <script type="text/javascript">18 window.onload=function(){19 var oLis=document.getElementsByTagName("li");20 var oshow=document.getElementById("show");21 for(var index=0;index<oLis.length;index++){22 oLis[index].onclick=function(){23 oshow.innerHTML=index;24 }25 }26 }27 </script>28 </head>29 <body>30 <div id="show"></div>31 <ul>32 <li>只有努力奋斗才会有美好的明天。</li>33 <li>分享互助是进步最大的源动力。</li>34 <li>每一天都是新的，要好好珍惜。</li>35 <li>没有人一开始就是高手，只有努力才有成长的可能</li>36 <li">只有当下的时间是可贵的，下一秒都是虚幻的</li>37 </ul>38 </body>39 </html>
在上面的代码中，当点击li元素的时候弹出值始终是四，我们本来的想法是，点击li元素在div中显示当前li元素的索引值，下面就简单分析一下其中的原因。原因非常的简单，当for循环执行完毕以后，index的值已经变为四，于是也就出现了上面的现象。
代码修改如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" utf-8"> 5 <meta name="author" content="http://www.softwhy.com/" /> 6 <title>蚂蚁部落</title> 7 <style type="text/css"> 8 li{ 9 width:240px;10 overflow:hidden;11 text-overflow:ellipsis;12 white-space:nowrap;13 font-size:12px;14 height:30px;15 }16 </style>17 <script type="text/javascript">18 window.onload=function(){19 var oLis=document.getElementsByTagName("li");20 var oshow=document.getElementById("show");21 for(var index=0;index<oLis.length;index++){22 oLis[index]._index=index;23 oLis[index].onclick=function(){24 oshow.innerHTML=this._index;25 }26 }27 }28 </script>29 </head>30 <body>31 <div id="show"></div>32 <ul>33 <li>只有努力奋斗才会有美好的明天。</li>34 <li>分享互助是进步最大的源动力。</li>35 <li>每一天都是新的，要好好珍惜。</li>36 <li>没有人一开始就是高手，只有努力才有成长的可能</li>37 <li">只有当下的时间是可贵的，下一秒都是虚幻的</li>38 </ul>39 </body>40 </html>
上面的代码实现了我们的要求，当然也可以使用闭包的方式，代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" utf-8"> 5 <meta name="author" content="http://www.softwhy.com/" /> 6 <title>蚂蚁部落</title> 7 <style type="text/css"> 8 li{ 9 width:240px;10 overflow:hidden;11 text-overflow:ellipsis;12 white-space:nowrap;13 font-size:12px;14 height:30px;15 }16 </style>17 <script type="text/javascript">18 window.onload=function(){19 var oLis=document.getElementsByTagName("li");20 var oshow=document.getElementById("show");21 for(var index=0;index<oLis.length;index++){22 (function(index){23 oLis[index].onclick=function(){24 oshow.innerHTML=index;25 }26 })(index)27 }28 }29 </script>30 </head>31 <body>32 <div id="show"></div>33 <ul>34 <li>只有努力奋斗才会有美好的明天。</li>35 <li>分享互助是进步最大的源动力。</li>36 <li>每一天都是新的，要好好珍惜。</li>37 <li>没有人一开始就是高手，只有努力才有成长的可能</li>38 <li">只有当下的时间是可贵的，下一秒都是虚幻的</li>39 </ul>40 </body>41 </html>
原文地址是使用for循环批量注册的事件不能正确获取索引值
使用for循环批量注册的事件不能正确获取索引值
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。