js循环绑定事件解决方案

转载 2015年11月20日 10:40:01
相信大家都遇到过类似的问题,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>  

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

相关文章推荐

【解决方案】闭包函数在for循环中的使用案例——for循环绑定监听事件索引值总是最后一个

请看以下两段代码,思考一下运行的结果是否一致呢? 代码一: for (var i = 0; i < as.length; i++) { (function () { var j =...

【JQuery】一个DOM元素,多次绑定同一事件的解决方案

Query的bind的函数在实际应用中用的不是特别多,只是他可以绑定一个事件,但不会即时触发,也可以通过unbind来解除绑定。在没有看到这篇文章之前,我一直不知道原来bind也可以有命名空间。事实上...

jquery动态添加元素无法触发绑定的事件的解决方案。

最近遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件。后来在网上查阅了一些资料,发现原来要这样处理:  先上我出错的代码:    <...

js图片预加载---for与onload事件,图片数据模型到界面的单项绑定,使用interval模拟循环操作

<!-- <button id="sto

JS操作数组循环删除指定元素,splice(i,1)出错解决方案

test,test,test,这里是摘要!
  • sRhee
  • sRhee
  • 2017-04-27 16:38
  • 207

JS事件和CSS媒体查询对同一元素操作样式发生冲突解决方案

JS事件和CSS媒体查询对同一元素操作样式发生冲突解决方案; 媒体查询针对不同的屏幕宽度大小对某元素调整样式,而JS事件针对不同的操作对某元素进行操作,当JS事件和媒体查询针对的是同一元素进行样式改变...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)