zoukankan      html  css  js  c++  java
  • 关于在for循环中绑定事件打印变量i是最后一次。

    参考:

    1.https://www.cnblogs.com/liao8735/p/3944913.html

    2.https://www.cnblogs.com/pssp/p/5215417.html

    在编写JS的时候我们经常会遇到要对一系列元素进行事件绑定,循环对元素的事件进行赋值,在这个过程中我们会遇到一个问题,那就每个元素事件运行的时候变量怎么都是相同的值。

    这里涉及到变量的作用域的问题,可以用闭包来解决这个问题。

    这里举个简单的列子来说明:

    <ul id="ulDemo">
      <li>数据</li>
      <li>数据</li>
      <li>数据</li>
      <li>数据</li>
      <li>数据</li>
    </ul>

    我们来给这些li添加一个onclick事件,弹出li是第几条数据

    1
    2
    3
    4
    5
    6
    7
    var list = document.getElementById("ulDemo").getElementsByTagName("li");
     for (var i = 0; i < list.length; i++) {
         var li = list[i];
         li.onclick= function () {
             alert("第" + (i + 1) + "条" this.innerHTML);
         }
     }

    结果弹出的都是第6条数据,这里的onclick函数中的变量i指向的内存地址,经过循环之后i变成了5,所有的li的点击事件都在同一个作用域中,我们可以通过闭包把i的作用域独立出来

    1
    2
    3
    4
    5
    6
    7
    var list = document.getElementById("ulDemo").getElementsByTagName("li");
          for (var i = 0; i < list.length; i++) {
              var li = list[i];
              li.onclick= (function (index) {
                  return function () { alert("第" + (index + 1) + "条" this.innerHTML) };
              })(i);
          }

    其他写法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    for (var i = 0; i < list.length; i++) {
               var li = list[i];
     
               var addClick = function (el, index) {
                   el.onclick= function () { alert("第" + (index + 1) + "条" this.innerHTML) };
               };
     
               addClick(li, i);
           }

      

    1
    2
    3
    4
    5
    6
    7
    for (var i = 0; i < list.length; i++) {
               var li = list[i];
     
               (function (el,index) {
                   el.onclick= function () { alert("第" + (index + 1) + "条" this.innerHTML) };
               })(li,i);
           }
    做有积累的事~~
  • 相关阅读:
    WSL 修改默认登录用户为root
    WSL ssh服务自启动
    odoo 获取model的所有字段
    C++类型父类与子类的转换--dynamic_cast(转)
    开源软件/镜像库
    C/C++编译器gcc的windows版本MinGW-w64安装教程(转)
    msys2 环境搭建
    Windows下利用Cygwin搭建C/C++开发环境GCC(转)
    模板类中子类访问父类中的成员需要通过this指针
    C++ 构造函数与this指针
  • 原文地址:https://www.cnblogs.com/robinunix/p/13600573.html
Copyright © 2011-2022 走看看