使用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>
时间: 2024-08-04 15:07:31