zoukankan      html  css  js  c++  java
  • JS之经典for循环闭包问题解决方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.css">

    </head>
    <body>
    <div class="container">
    <div class="row">
    <div class="col-md-3">
    <hr>
    <div class="panel panel-info">
    <div class="panel-heading">
    <h3 class="panel-title">闭包经典实例</h3>
    <div>
    <div class="panel-body">
    <ul class="list-group">
    <li class="list-group-item">1</li>
    <li class="list-group-item">2</li>
    <li class="list-group-item">3</li>
    <li class="list-group-item">4</li>
    <li class="list-group-item">5</li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <script >
    var liList=document.getElementsByTagName('li');

    for(var i=0;i<liList.length;i++){

    liList[i].number=i;
    liList[i].onclick=function(){
    alert(this.number)
    }

    // (function (i){
    // liList[i].onclick=function( ){
    // alert('当前点击第'+ i+'个');
    // }
    // })(i)
    }
    </script>
    </body>
    </html>


    像这样一个代码片段,初学者会理所当然地认为依次点击Li会弹出相应的0、1、2、3、4 但实际结果是每次都是4
    原因是:每次点击输出i的时候,函数内部没有i,就从外部函数查找,而外部函数的值是每一次循环后的值4,所以每次点击输出的都是4

    解决办法一:加一层闭包,i 以函数参数形式传递给内层函数:

              (function (i){
    liList[i].onclick=function( ){
    alert('当前点击第'+ i+'个');
    }
    })(i)

    解决办法二:找个属性将i值保存起来,然后弹出这个值

            liList[i].number=i;
    liList[i].onclick=function(){
    alert(this.number)
    }


  • 相关阅读:
    1074. Reversing Linked List (25)
    1056. Mice and Rice (25)
    1051. Pop Sequence (25)
    1001. A+B Format (20)
    1048. 数字加密(20)
    1073. Scientific Notation (20)
    1061. Dating (20)
    1009. 说反话 (20)
    MyBatis学习总结(8)——Mybatis3.x与Spring4.x整合
    MyBatis学习总结(8)——Mybatis3.x与Spring4.x整合
  • 原文地址:https://www.cnblogs.com/zhumingyong/p/8994636.html
Copyright © 2011-2022 走看看