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

 <!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. 爬虫6：pyquery库

      强大又灵活的网页解析库,如果觉得正则写起来太麻烦,BeautifulSoup语法太难记,而你又熟悉jQuery的语法,那么用PyQuery就是最佳选择     一. 初始化 1. 字符串初始化 h ...

  2. C#-WebForm-Repeater的灵活运用、ItemCommand的用法-增删改查、如何不适用Repeater来展示数据？

    浏览器页面: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defau ...

  3. jQuery 动画用法

    jQuery动画: <head> <meta charset="UTF-8"> <title>Title</title> <s ...

  4. python学习，day3：函数式编程，带参数

    # coding=utf-8 # Author: RyAn Bi def test(x,y,z): print(x) print(y) print(z) test(y=2,z =3,x=1) #形参与 ...

  5. CF1007D. Ants（树链剖分＋线段树＋2-SAT及前缀优化建图）

    题目链接 https://codeforces.com/problemset/problem/1007/D 题解 其实这道题本身还是挺简单的,这里只是记录一下 2-SAT 的前缀优化建图的相关内容. ...

  6. 1.TypeError: must be str, not bytes

    1.TypeError: must be str, not bytes错误: 解答: 写文件处 open(filename, 'w').write 应该写为 open(filename, 'wb'). ...

  7. AngularJS指令详解

    一.什么是指令? 在<AngularJs权威教程>中,指令可以简单理解成特定的DOM元素上运行的函数:我认为还可以理解成将将自定义的HTML标签解析成原始的标签,然后为其加入一些扩展的功能 ...

  8. emacs26.1 ppa

    sudo add-apt-repository ppa:kelleyk/emacssudo apt updatesudo apt install emacs26

  9. WPF DataTemplate與ControlTemplate

    一. 前言     什麼是DataTemplate? 什麼是ControlTemplate? 在stackoverflow有句簡短的解釋 "A DataTemplate, therefore ...

  10. java.lang.NoClassDefFoundError: org/springframework/ui/jasperreports/JasperReportsUtils原因

    在springMVC结合jasperReporter中发现的问题 java.lang.NoClassDefFoundError: org/springframework/ui/jasperreport ...