您好,欢迎来到二三四教育网。
搜索
您的当前位置:首页JS循环绑定两句谈

JS循环绑定两句谈

来源:二三四教育网

不知道是早期上课时,老师故弄玄虚的将循环的问题暴露一遍,然后用解释不通的解释讲一遍。在使用循环绑定前一直心有疑虑,战战兢兢。其实,何必呢,两句话直接完成,且带有对比。

之前的问题

    <body>  
    <ul id="list">  
    <li>1</li>  
    <li>2</li>  
    <li>3</li>  
    <li>4</li>  
    <li>5</li>  
    </ul>  
    <script>  
    var list_obj = document.getElementsByTagName('li');  
    for (var i = 0; i <= list_obj.length; i++) {        
      list_obj[i].onclick = function() { // i=5
        alert(i);      
      }  
    }  
    </script>  
    </body>

理解上onclick没有触发,只是一个函数表达式,所以i直接跳过继续执行,得到只能是i=5

基本解决办法,就是也让onclick事件执行,既然没法直接变被动为主动,那就虚伪的给他一个执行,让他占个坑,于是闭包应用而生。执行,执行,再执行。

    <body>  
    <ul id="list">  
    <li>1</li>  
    <li>2</li>  
    <li>3</li>  
    <li>4</li>  
    <li>5</li>  
    </ul>  
    <script>  
    var list_obj = document.getElementsByTagName('li');  
    for (var i = 0; i <= list_obj.length; i++) {      
      (function(){      
        var p = i     
        list_obj[i].onclick = function() {      
          alert(p);      
        }  
      })();  
    }  
    </script>  
    </body>  

类似的办法也引用过来。

    for(var i=0;i<10;i++){ 
        btns[i].onclick=(function(i){ 
            return function(){alert(i)} 
        })(i) 
    } 

以上方法未做测试,只是在想一个问题,既然我们常用addEventListener,那么这个问题就不是问题,不需要闭包,直接给

btns[i].addEventListener('click'. function(){
    // do something    
} )

执行即可。

Copyright © 2019- how234.cn 版权所有 赣ICP备2023008801号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务