现在的位置: 首页 > 综合 > 正文

js循环绑定事件解决方案

2013年11月11日 ⁄ 综合 ⁄ 共 832字 ⁄ 字号 评论关闭

相信大家都遇到过类似的问题,for循环绑定完事件最后执行的时候都是最后一个事件相同,比如这段代码 

Java代码  收藏代码
  1. <body>  
  2. <ul id="list">  
  3. <li>1</li>  
  4. <li>2</li>  
  5. <li>3</li>  
  6. <li>4</li>  
  7. <li>5</li>  
  8. </ul>  
  9. <script>  
  10. var list_obj = document.getElementsByTagName('li');  
  11. for (var i = 0; i <= list_obj.length; i++) {        
  12.   list_obj[i].onclick = function() {      
  13.     alert(i);      
  14.   }  
  15. }  
  16. </script>  
  17. </body>  


点击的时候弹出的不是0 1 2 3 4,而是5。 

解决方案也很多种,比如可以新建一个function设置一个私有方法,然后每次new一个object然后再绑定到它的方法上。 
还有就是闭包,写法相对简单: 

Java代码  收藏代码
  1. <body>  
  2. <ul id="list">  
  3. <li>1</li>  
  4. <li>2</li>  
  5. <li>3</li>  
  6. <li>4</li>  
  7. <li>5</li>  
  8. </ul>  
  9. <script>  
  10. var list_obj = document.getElementsByTagName('li');  
  11. for (var i = 0; i <= list_obj.length; i++) {      
  12.   (function(){      
  13.     var p = i     
  14.     list_obj[i].onclick = function() {      
  15.       alert(p);      
  16.     }  
  17.   })();  
  18. }  
  19. </script>  
  20. </body>  


就是每个循环加上闭包,然后设置一个临时变量,问题解决。 

抱歉!评论已关闭.