<!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总是最后一个的更多相关文章

  1. 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  2. JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片

    1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  3. js点击弹出div层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

  5. jQuery之点击弹出图标环形菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  6. jquery---点击弹出层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery点击弹出层，弹出模态框，点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  8. jQuery第二课 点击弹出一个提示框

    选择器允许您对元素组或单个元素进行操作. jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元 ...

  9. Javascript实现图片点击弹出

    一直想给安装一个缩略图点击弹出的插件,但是找了找几乎都是用的php来做的,插件的使用和安装极其繁琐,于是上网查了些demo,自己实现了一个纯js的图片弹出插件. 实现的思路是通过编写hook图片的on ...

随机推荐

  1. 关于解决SSHD 连接 认证失败的问题

    网上找有很多方法,有时候情况不一样 ,也不实用 其实找到解决问题的思路更总要 首先分析日志文件 less /var/log/secure | grep sshd ,看具体出现什么问题 然后再去搜索相关 ...

  2. 小米5安装Xposed框架——需要解锁刷机

    Xposed官网 https://forum.xda-developers.com/xposed 官方模块厂库 https://repo.xposed.info/ 中文站点 https://xpose ...

  3. HDU4699：Editor

    浅谈栈:https://www.cnblogs.com/AKMer/p/10278222.html 题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=46 ...

  4. poj 1658 Eva's Problem(水题)

    一.Description Eva的家庭作业里有很多数列填空练习.填空练习的要求是:已知数列的前四项,填出第五项.因为已经知道这些数列只可能是等差或等比数列,她决定写一个程序来完成这些练习. Inpu ...

  5. 第 六 课 GO语言常量

    http://www.runoob.com/go/go-constants.html 一 常量 是一个简单值的标识符,在程序运行时,不会被修改的量. 常量中的数据类型只可以是布尔型.数字型(整数型.浮 ...

  6. 使用TRY CATCH进行SQL Server异常处理

    TRY...CATCH是Sql Server 2005/2008令人印象深刻的新特性.提高了开发人员异常处理能力.没有理由不尝试一下Try.. Catch功能. *      TRY 块 - 包含可能 ...

  7. 基于STM32的三轴数字罗盘HMC5883L模块的测试

    最近买了个数字罗盘模块,调通后发现很不错,非常灵敏,测试的时候精度在1°以内.连续测量模式下,最快测量.输出速率可达75hz,模块每次测量完毕并将数据更新至寄存器后,其DRDY引脚便产生一个低电平脉冲 ...

  8. Break 、Continue 和ReadOnly、Const和Ref和Out params

    Break和Continue区别 之前对于Break和Continue:ReadOnly和Const:ref和out,params之类的基础东东学习过,但是一直没有仔细去研究到底是怎么一回事儿,最近在 ...

  9. cisco 2901 配置拨号上网

    1.输入en,然后输入密码确认后按conf t2.Router(config)# vpdn enable        interface dialer 1   // 进入拨号器13.Router(c ...

  10. 汉字转为unicode

    在word中输入“立项申请阶段”,将光标移到每字之后时按下组合键Alt+X. 立项申请阶段 7ACB  9879  7533  8BF7  9636  6BB5 \u7ACB\u9879\u7533\ ...