首页 > 代码库 > javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
今天遇到一个问题,那就是当使用for循环批量注册事件处理函数,然后最后通过事件处理函数获取当前元素的索引值的时候会失败,先看一段代码实例:
<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.length=5 oLis[index].onclick=function(){ oshow.innerHTML=index; } } } </script>
分析:在上面的代码中,当点击li元素的时候弹出值始终是四,我们本来的想法是,点击li元素在div中显示当前li元素的索引值,但是,当for循环执行完毕以后,index的值已经变为四,于是也就出现了只显示4的现象。
解决方法:
(1)将当前的i只保存在一个数组中,这样就能在事件中获取准确的索引值。
<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>
(2)采用闭包的方法
<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>
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。