好像是第二次遇到这个问题，必须要总结一下！！

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

     </head>

     <style type="text/css">

         li{

             width: 100px;

             height: 50px;

             background-color: red;

             margin-bottom: 10px;

         }

     </style>

     <body>

         <ul id="ulList">

             <li></li>

             <li></li>

             <li></li>

             <li></li>

         </ul>

         <script>

             var lis = document.getElementById("ulList").getElementsByTagName("li");

             for(var i=0;i<lis.length;i++){

               lis[i].onclick = function(){
　　　　　　　　　　　　　　console.log(i);　　
　　　　　　　　　　　　}             }

         </script>

     </body>

 </html>

如果按照以上方法，无论点击哪一个li标签，i的值都会是4，并不能像我们所想的那样打印出0,1,2,3，原因是什么呢？

暂时也不太清楚，好像涉及闭包，因为也没学到，就参考别人回答总结一下。

for循环是一个外部闭包，依次绑定的点击事件是一个函数实例，也产生了一个闭包域，它引用了外部闭包的变量i，外部闭包域中i的最终值为4，点击事件触发时引用外部闭包变量i（此时i=4），所以输出的值全为4。

暂时先写两种自己能掌握的解决方法：

方法一：在for循环中点击事件外套一个自执行的匿名函数，将索引变量i保存到匿名函数的形参中

 <script>

             var lis = document.getElementById("ulList").getElementsByTagName("li");

             for(var i=0;i<lis.length;i++){

                 (function(arg){

                     lis[i].onclick = function(){

                         console.log(arg);

                     }

                 })(i);

             }

 </script>

方法二：在for循环中，为每一个要点击的对象创建属性用来保存索引变量i

 <script>

             var lis = document.getElementById("ulList").getElementsByTagName("li");

             for(var i=0;i<lis.length;i++){

                 lis[i].i = i; //创建属性保存变量i

                 lis[i].onclick = function(){

                     console.log(this.i);

                     // console.log(lis[i].i);绝对不能这样写,要不然 Uncaught TypeError: Cannot read property 'i' of undefined

                 }

             }

         </script>

js for循环中点击事件中无法获取每一个i值的问题的更多相关文章

  1. JS中点击事件冒泡阻止

    JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...

  2. Android中点击事件的四种写法详解

    Android中点击事件的四种写法 使用内部类实现点击事件 使用匿名内部类实现点击事件 让MainActivity实现View.OnClickListener接口 通过布局文件中控件的属性 第一种方法 ...

  3. js触发按钮点击事件

    js触发按钮点击事件 博客分类: javascript   模拟JS触发按钮点击功能 <html> <head> <title>usually function&l ...

  4. android中点击事件的4种写法

    android中获取到一些控件(比如说按钮)时,一般会为其添加点击事件,android中的点击事件一共有4中写法. 假设在布局文件中声明如下 ....... <Button android:la ...

  5. 在CTreeCtrl控件点击事件中获取点击的项

    网上搜了一下,有两种方法: 1.使用GetSelectedItem() HTREEITEM hItem = m_treeCtrl.GetSelectedItem(); CString strText ...

  6. js input radio点击事件

    html代码: <input type="radio" name="myname" value="1" />1 <inpu ...

  7. ng-change事件中如何获取$event和如何在子元素事件中阻止调用父级元素事件（阻止事件冒泡）

    闲聊: 今天小颖要实现一个当改变了select内容后弹出一个弹框,并且点击select父元素使得弹框消失,这就得用到阻止事件的冒泡了:$event.stopPropagation(),然而小颖发现,在 ...

  8. 【JSP EL】<c:if> <c:foreach >EL表达式 获取list长度/不用循环,EL在List中直接获取第一项的内容/EL获取Map的键,Map的值

    1.EL表达式 获取list长度 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" ...

  9. js sort方法根据数组中对象的某一个属性值进行排序（实用方法）

    js sort方法根据数组中对象的某一个属性值进行排序 sort方法接收一个函数作为参数,这里嵌套一层函数用来接收对象属性名,其他部分代码与正常使用sort方法相同. var arr = [ {nam ...

随机推荐

  1. 使用selenium的WebDriver和ChromeDriver实现UI自动化

    下载chromedriver chromedriver与chrome的对应关系表:http://blog.csdn.net/huilan_same/article/details/51896672 下 ...

  2. knova绘制矩形

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. pixi.js v5版本出了。

    历尽千辛万苦,pixi.js v5版本出了. 请关注群 881784250, 会尽块出个微信小游戏版. pixi.js的每个函数,每个类都有测试用例的.出的版本都是很稳定的.

  4. 持续集成篇：jenkins搭建和job运行

    好久没有更博了,最近都在忙着其他事情,年底前加上这章再更5篇,10月份开始因为公司业务,要接触appium啦,之后应该也会有所分享. Jenkins所需环境  硬件需求: ①至少需要有256M内存,推 ...

  5. js字符串去重

    js字符串去重: 1.  去掉字符串前后所有空格: function Trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } ...

  6. 华南理工大学“三七互娱杯”程序设计竞赛 HRY and codefire(概率期望DP)

    https://ac.nowcoder.com/acm/contest/874/A 题目:有两个账号 , 一开始都为0级 , 求任意一个账号升级到N的期望 要求:如果当前账号嬴了 , 就继续沿用当前的 ...

  7. HDU - tag :: Multi-University 大合集

    说明:按无序更新,只更(会)水题 4632 题意:求字符串的回文子[序列]个数 区间DP,设\(dp[i][j]\)为\([i,j]\)范围内的回文子序列个数, 由容斥定理可得\(dp[i][j]=d ...

  8. 自定义 mapper

    1. 定义一个接口 public interface ItemMapper { List<Item> getItemList(); } 2. 编写  xml  文件 ,  将sql 语句填 ...

  9. [转] etcd 搭建与使用

    [From] https://blog.csdn.net/ShouTouDeXingFu/article/details/81167302 etcd 1.下载etcd二进制文件包         ht ...

  10. [转] linux alias 编写 函数 脚本

    [From] https://blog.csdn.net/csdnmonkey/article/details/53286314 案例 alias ttt='ttt(){ echo $1 ; };tt ...