码迷,mamicode.com
首页 > Web开发 > 详细

js常见问题之为什么点击弹出的i总是最后一个

时间:2016-01-14 15:44:34      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:

<!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的值,所以就弹出了相应的索引值。

js常见问题之为什么点击弹出的i总是最后一个

标签:

原文地址:http://www.cnblogs.com/qianduanjingying/p/5130094.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!