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

 <!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. 设置跨交换机VLAN

    4台计算机,pc1 pc2 连接到交换机1的f1/1和f1/2.Pc3 pc4 连接到交换机2的f1/1和f1/2.pc1设置ip地址192.168.1.10,pc2 pc3 pc4设置ip地址192 ...

  2. 通过UIColor转换为UIImage

    + (UIImage *)createImageWithColor:(UIColor *)color { CGRect rect=CGRectMake(0.0f, 0.0f, 1.0f, 1.0f); ...

  3. 如何使用robots禁止各大搜索引擎爬虫爬取网站

    ps:由于公司网站配置的测试环境被百度爬虫抓取,干扰了线上正常环境的使用,刚好看到每次搜索淘宝时,都会有一句由于robots.txt文件存在限制指令无法提供内容描述,于是便去学习了一波 1.原来一般来 ...

  4. 浅谈mongodb与Python的交互

    1. mongdb和python交互的模块 pymongo 提供了mongdb和python交互的所有方法 安装方式: pip install pymongo 2. 使用pymongo 导入pymon ...

  5. python全栈开发_day17_时间，系统模板和序列化

    一:时间模板 1)time 常用功能: time.sleep() time.time() time.strftime() import time print(time.strftime("% ...

  6. python全栈开发_day14_常见语法糖，递归和匿名函数

    一:常见语法糖 1)三元函数(三目函数) a=1 if 3>2 else 2 print(a) #得到返回值:1 2)列表字典推导式 lis=[("a",1),(" ...

  7. android samsung note3 　device not found

    descriptiong : android  samsung note3 device not found solution: usb link by PTP, DONE! (be curiosly ...

  8. windows下python管理右键菜单

    实现很简单,不记得什么时候写的了,贴出来希望能有所价值 """ Windows中创建右键菜单 """ import os import sy ...

  9. MySQL 创建schema

    create schema zzz default character set utf8 collate utf8_general_ci;--创建数据库 grant select,insert,upd ...

  10. dubbo服务暴露过程

    所谓服务暴露最终做的事情:绑定网络端口,开启serversokect服务以接收外部请求 服务暴露时序图 本地暴露 远程暴露 整体总结 dubbo服务提供者暴露服务的主过程:首先 ServiceConf ...