关闭

js循环绑定事件解决方案

215人阅读 评论(0) 收藏 举报
分类:
相信大家都遇到过类似的问题,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>  

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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:80365次
    • 积分:1531
    • 等级:
    • 排名:千里之外
    • 原创:64篇
    • 转载:77篇
    • 译文:0篇
    • 评论:5条
    文章分类
    最新评论