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

 <!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. 定期删除Azure存储账号下N天之前的数据文件-ARM

    ######RemoveStorageBlob*DaysOld-ARM##### <# .SYNOPSIS Remove all blob contents from one storage a ...

  2. mysql数据库中常用操作汇总

    一.查询数据库的基本信息: 1.    /* 查询数据库 ‘boss’ 所有表及注释 */SELECT TABLE_NAME,TABLE_COMMENT FROM information_schema ...

  3. 利用Python爬取电影网站

    #!/usr/bin/env python #coding = utf-8 ''' 本爬虫是用来爬取6V电影网站上的电影资源的一个小脚本程序,爬取到的电影链接会通过网页的形式显示出来 ''' impo ...

  4. webpack+vue中安装使用vue-layer弹窗插件

    1.安装vue-layer插件 npm install vue-layer --save-dev 2.打包入口文件main.js中引入vue.vue-layer.并且将vue-layer添加到vue原 ...

  5. @ModelAttribute注解和POJO传参过程

    1.@ModelAttribute注解 @ModelAttribute主要有三个用途,对方法进行注解,对参数进行注解,还有@ModelAttribute和@RequestMapping一起对方法进行注 ...

  6. /proc/xxx/maps简要记录

    定位内存泄漏基本上是从宏观到微观,进而定位到代码位置. 从/proc/meminfo可以看到整个系统内存消耗情况,使用top可以看到每个进程的VIRT(虚拟内存)和RES(实际占用内存),基本上就可以 ...

  7. Codeforces Round #517

    传送门 A. Cram Time 你有一本书,阅读第\(i\)页需要花费\(i\)的时间.你第一天有\(a\)的时间,第二天有\(b\)的时间,问你的总阅读页数的最大值. Input: 一行包含\(2 ...

  8. 图像的上采样（upsampling）与下采样（subsampled）

    缩小图像(或称为下采样(subsampled)或降采样(downsampled))的主要目的有两个:1.使得图像符合显示区域的大小:2.生成对应图像的缩略图. 放大图像(或称为上采样(upsampli ...

  9. GeneXus学习笔记——入门篇

    使用GeneXus做开发做了有一段时间了 却发现一个问题(O_O)?就是除了相关的Wiki外 网上其他地方的相关资料都很少 于是乎我就想在这记录一些东西 来帮助以后会用到的人(°ー°") 那 ...

  10. 更安全的https && https的问题

    视频推荐:https的性能优化 推荐文章:腾讯https性能优化实践 更安全的https(内容加密.身份认证.数据完整性) https实际上就是在http和tcp之间添加了ssl层或者是TLs层,这两 ...