javascriptはforサイクルの中でiが取る問題を解決します.

5565 ワード

html数:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        //      :

        function onMyLoad(){
            /*
                :
                                          0~4,                  5
                :
                arr        onclick         (Function   ),               ,
                                ,  function scope   closure        i    ,
                                ,                
            */
            var arr = document.getElementsByTagName("p");
            for(var i = 0; i < arr.length;i++){
                arr[i].onclick = function(){
                    alert(i);
                }
            }
        }
    </script>
</head>
<body onload="onMyLoad()">
    <p>   </p>
    <p>   </p>
    <p>   </p>
    <p>   </p>
    <p>   </p>
</body>
</html>

　　
方法1:

/*     :              (          ),               (  ),         (       ,        ) */ for(var i = 0;i<arr.length;i++){ //        ,               ,          , //              arg(  ) ,     function scope   closure          ,    arr,    i //     i         ,       (  ) arg      ,                . (function (arg) { arr[i].onclick = function () { //onclick      function scope   closure           arg, alert(arg); //         arg   ,             } })(i); //         ,     i(  ) }

方法二:

/*
    :
             (name:"i",value:i  )        (p  ) 
*/
for(var i = 0;i<arr.length;i++){
    //          p          i    ,       i     ,
    //     p     i            i      ,      p      ,             
    //(             ,                       ,                   ,         ,      )
    arr[i].i = i;
    arr[i].onclick = function () {
        alert(this.i);
    }
}

方法三:

/*
    :
                      .
       :                      
       :                        ,                       

              function scope    closure        arg                   arg
 */
for(var i = 0; i<arr.length;i++){
    arr[i].onclick = (function(arg){
        return function () {
            alert(arg);
        }
    })(i);
}

方法4:

/*
            
 */
for(var i = 0; i<arr.length;i++){
    (function(){
       var temp = i;
        arr[i].onclick = function () {
            alert(temp);
        }
    })();
}

方法5:

/*
              
 */
for(var i = 0;i<arr.length;i++){
    arr[i].onclick = (function () {
        var temp = i;
        return function () {
            alert(temp);
        }
    })();
}

方法6:

/*
    :
                 
 */
for(var i = 0;i<arr.length;i++){
    (arr[i].onclick = function () {
        alert(arguments.callee.i);      //arguments       arguments.callee         
    }).i = i;
}

方法7:

/*
    :
       new    Function          Function     ,               ,  Function            ,      i    (       i.toString()                  ,Function           JS   )
 */
for(var i = 0;i<arr.length;i++){
    arr[i].onclick = new Function("alert("+i+");");//  new    Function      Function   (    ),       
}

方法8:

/*
    :
         Function       
                 :
                new,    new,   Function                   Function     
                   new ,   Function         ,           ;
             new    new        :
                new   Function        ,  JS            ,      this       ;
                new   Function        ,               .
 */
for(var i = 0;i<arr.length;i++){
    arr[i].onclick = Function("alert("+i+");");
}

方法9:

<script type="application/javascript">
    "use strict";//      ,     SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    var arr = document.getElementsByTagName("p");
    for(var i = 0;i<arr.length;i++){
        let j = i;//        
        arr[i].onclick = function () {
            alert(j);
        }
    }
</script>

　　
原文:https://segmentfault.com/a/1190000003818163?_ea=385256菘articaleHeader 0

ES 6 Promiseオブジェクト解決非同期フィードバック