zoukankan      html  css  js  c++  java
  • for循环遍历LI问题

    <ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    </ul>

    window.onload = function (){
      var ULa = document.getElementById("ul1");
      var lia = ULa.getElementsByTagName("li");
      for(var i=0;i<lia.length;i++){

         lia[i].onclick = function(){ 
            alert(i);//此时打印的都是4  原因是闭包的问题  解析程序首先会在事件处理程序内部查找,这个匿名函数内部没有定义变量i,然后往上级查找,此时i为4 
          };
       };
    }

    下面做下分析:因为在for循环里面指定给lia[i].onclick的事件处理程序,也就是onclick那个匿名函数是在for循环执行完成后(用户单击链接时)才被调用的。而调用时,需要对变量i求值,解析程序首先会在事件处理程序内部查找,但i没有定义。然后,又到方法外部去查找,此时有定义,但i的值是4(只有i大于4才会停止执行for循环)。因此,就会取得该值——这正是闭包(匿名函数)要使用其外部作用域中变量的结果。而且,这也是由于匿名函数本身无法传递参数(故而无法维护自己的作用域)造成的。

    解决方法:

    1、window.onload = function(){
        var oUl = document.getElementById("ul1");
        var aLi = oUl.getElementsByTagName('li');
        for(var i=0;i<aLi.length;i++){
          (function(e){
            aLi[i].onclick = function(){
              console.log(i);//全部打印4
            }
          })(i);
        }

    }

    2、从匿名包装器中返回一个函数

      window.onload = function(){
        var oUl = document.getElementById("ul1");
        var aLi = oUl.getElementsByTagName('li');
        for(var i=0;i<aLi.length;i++){

          aLi [i].onclick = (function(e){ 
                  return function(){
                      alert(e + 1);
                  };
               })(i);
        }

        }

     
    
    
  • 相关阅读:
    生成指定范围的随机数
    sql
    map的使用
    基础03 JVM到底在哪里?
    Elasticsearch6.1.0 TransportClient聚合查询索引中所有数据
    Elasticsearch6.1.0 TransportClient滚动查询索引中所有数据写入文件中
    elasticsearch-java api中get() 和execute().actionGet()方法
    Elasticsearch6(Transport Client)常用操作
    Reflections反射获取注解下类
    Ambari2.6.0 安装HDP2.6.3: Python script has been killed due to timeout after waiting 300 secs
  • 原文地址:https://www.cnblogs.com/qhhw/p/6511559.html
Copyright © 2011-2022 走看看