zoukankan      html  css  js  c++  java
  • js常见问题之为什么点击弹出的i总是最后一个

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>for</title>
        <style type="text/css">
        li{
            height:50px;
        }
        </style>
    </head>
    <body>
        <ol>
            <li></li>
            <li></li>
        </ol>
        <script>
            var btn = document.getElementsByTagName('li');
            
            for(var i = 0;i<2;i++){
                    btn[i].onclick = function(){
                    alert(i+1);
                };
            }
    
        </script>
    </body>
    </html>

    分析:

    i = 0时,btn[0].onclick = function(){alert(i+1)}
    i = 1时,btn[1].onclick = function(){alert(i+1)}
    i = 2时,不满足条件跳出循环.

    在执行click的函数的时候,会有一个作用域链,这个作用域链是一个对象列表,这组对象定义了代码作用域中的变量。( 关于变量对象的内容想更详细了解的可以查看变量对象。)当我们alert(i)的时候,会去从内到外的去寻找变量i。这个时候这个函数的作用域链上有两个对象,这时循环已经结束了,i此时的值为2.所以点击任何一个li,弹出的都是2,而不是我们想要的索引值。重点在于弹出的是变量i,变量i,变量i。重要的事情说三遍。

     那么问题来了,我们要如何解决这个问题呢。我们需要做的就是在每次给aLi[i]绑定事件的时候,将这个时候i的值保存在内部的作用域中。解决方案如下。

    var btn = document.getElementsByTagName('li');
            
            for(var i = 0;i<4;i++){
                (function(i){
                    btn[i].onclick = function(){
                    alert(i+1);
                };
            })(i)
            }
    i = 0时,
        (function(i){
          btn[0].onclick = function(){
              alert(i+1);
          }
        })(0)
        i = 1时,
        (function(i){
         btn[1].onclick = function(){
             alert(i+1);
          }
        })(1)
        i = 2时,不满足条件跳出循环.

    由于多了一层自执行函数的包裹,当我们点击li时,会有三层的作用域,从内带外分别是:click函数内部的变量对象,自执行函数的变量对象和最外层的window对象。查找到第二层的时候,找到了i,自执行函数的i等于传入的参数值,相对应的存下了当时i的值,所以就弹出了相应的索引值。

  • 相关阅读:
    angular 项目创建
    博客园 样式记录
    postman运行后窗口不显示的解决办法 --转载
    关于Vue中this作用域说明,以及一个this->undefined问题的处理 --转载
    vue 中 使用 vue-cookie --转载
    某些时候 v-if 会导致 v-modal 内部数据获取不到 也watch不到,这个时候用v-show即可,另外提一下数组要整体赋值才有双向绑定--转载
    CSS 基础4
    CSS 基础3
    CSS 基础1
    CSS 基础2
  • 原文地址:https://www.cnblogs.com/qianduanjingying/p/5130094.html
Copyright © 2011-2022 走看看