<!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. FEC之异或运算应用

    话说为啥FEC需要异或( ^/⊕ )操作呢? 异或:xor 异或运算规则: 0 xor 0 = 0 0 xor 1 = 1 1 xor 0 = 1 1 xor 1 = 0 异或运算特性: 1). a ...

  2. 【LeetCode】019. Remove Nth Node From End of List

    Given a linked list, remove the nth node from the end of list and return its head. For example, Give ...

  3. iOS+PHP图片上传

    这篇博客用于实现iOS客户端通过POST请求,将图片上传到服务器上.服务器端语言采用PHP,服务器环境使用MAMP搭建.先使用浏览器测试图片是否可以上传,浏览器测试成功之后再测试iOS客户端是否可以成 ...

  4. [转]前端网络（性能）监测工具berserkJS

    berserkJS 是基于 Qt (C++跨平台库)开发的前端网络(性能)监测工具. 它的核心功能是通过内置 webkit 收集由页面实际网络请求相关数据. 偏重于页面上线前检测与评估. 页面性能分析 ...

  5. Operating System-进程/线程内部通信-竞争条件（Race Conditions）

    从本文开始介绍进程间的通信,进程间通信遇到的问题以及方式其实和线程之间通信是一致的,所以进程间通信的所有理论知识都可以用在线程上,接下来的系列文章都会以进程之间的通信为模版进行介绍,本文主要内容: 进 ...

  6. TFS自定义开发中的反射应用

    最近CM(Configuration Management) 的同事在自定义开发TFS的过程中遇到一个问题. 领导要求快速开发一个工具, 可以自动连接TFS,然后自动Check out一些word文件 ...

  7. POJ2528(离散化+线段树区间更新)

     Mayor's posters Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u De ...

  8. DNS Doctoring

    NAT的应用可以让路由器在不同地址域内路由数据包.一个暴露在外的应用服务器,通常同时拥有了内网和外网的IP地址.这在DNS解析时可能带来麻烦. 根据DNS服务器的部署位置和配置,对同一内网中的应用服务 ...

  9. ZAB与Paxos算法的联系与区别

    ZAB协议并不是Paxos算法的一个典型实现,在讲解ZAB和Paxos之间的区别之前,我们首先来看下两者的联系. 两者都存在一个类似于Leader进程的角色,由其负责协调多个Follow进程的运行. ...

  10. [51nod1212]最小生成树模板

    解题关键:注意下标 解法一:prim算法 #include<bits/stdc++.h> #define maxv 1002 #define maxm 50002 #define INF ...