免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
› 论坛 › 程序设计 › Web开发 › js循环绑定事件解决方案
最近访问板块 发新帖
查看: 2010 | 回复: 0
打印 上一主题 下一主题

js循环绑定事件解决方案 [复制链接]

feiyang10086

论坛徽章:
0
跳转到指定楼层
1楼 [收藏(0)] [报告]
发表于 2011-11-30 14:50 |只看该作者 |倒序浏览
js循环绑定事件解决方案










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

Java代码
  1. 1.<body>   
  2. 2.<ul id="list">   
  3. 3.<li>1</li>   
  4. 4.<li>2</li>   
  5. 5.<li>3</li>   
  6. 6.<li>4</li>   
  7. 7.<li>5</li>   
  8. 8.</ul>   
  9. 9.<script>   
  10. 10.var list_obj = document.getElementsByTagName('li');   
  11. 11.for (var i = 0; i <= list_obj.length; i++) {         
  12. 12.  list_obj[i].onclick = function() {      
  13. 13.    alert(i);      
  14. 14.  }   
  15. 15.}   
  16. 16.</script>   
  17. 17.</body>  
  18. <body>
  19. <ul id="list">
  20. <li>1</li>
  21. <li>2</li>
  22. <li>3</li>
  23. <li>4</li>
  24. <li>5</li>
  25. </ul>
  26. <script>
  27. var list_obj = document.getElementsByTagName('li');
  28. for (var i = 0; i <= list_obj.length; i++) {      
  29.   list_obj[i].onclick = function() {   
  30.     alert(i);   
  31.   }
  32. }
  33. </script>
  34. </body>
复制代码
点击的时候弹出的不是0 1 2 3 4，而是5。

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

Java代码
  1. 1.<body>   
  2. 2.<ul id="list">   
  3. 3.<li>1</li>   
  4. 4.<li>2</li>   
  5. 5.<li>3</li>   
  6. 6.<li>4</li>   
  7. 7.<li>5</li>   
  8. 8.</ul>   
  9. 9.<script>   
  10. 10.var list_obj = document.getElementsByTagName('li');   
  11. 11.for (var i = 0; i <= list_obj.length; i++) {      
  12. 12.  (function(){      
  13. 13.    var p = i      
  14. 14.    list_obj[i].onclick = function() {      
  15. 15.      alert(p);      
  16. 16.    }   
  17. 17.  })();   
  18. 18.}   
  19. 19.</script>   
  20. 20.</body>  
  21. <body>
  22. <ul id="list">
  23. <li>1</li>
  24. <li>2</li>
  25. <li>3</li>
  26. <li>4</li>
  27. <li>5</li>
  28. </ul>
  29. <script>
  30. var list_obj = document.getElementsByTagName('li');
  31. for (var i = 0; i <= list_obj.length; i++) {   
  32.   (function(){   
  33.     var p = i   
  34.     list_obj[i].onclick = function() {   
  35.       alert(p);   
  36.     }
  37.   })();
  38. }
  39. </script>
  40. </body>
复制代码
就是每个循环加上闭包，然后设置一个临时变量，问题解决。

这个问题遇到过多次了，每次都要烦一下，今天记录之。
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号：11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们：huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP