weixin_40583091 2018-07-12 13:56 采纳率: 100%
浏览 537
已采纳

这个动态绑定click为什么不正确

解释详细一下图片说明

  • 写回答

9条回答 默认 最新

  • yang52ya7 2018-07-14 04:55
    关注
     window.onload = function () {
         var d = document.getElementsByTagName('a');    // 假设现在有5个 a标签
         for (var i = 0; i < d.length; i++) {
             d[i].onclick = function () {
                 console.log(i)          // 由于异步的关系 i 现在是5 , 因为绑定的方法中使用的i for循环之后的i 
                 d[i].innerHTML += d[i].innerHTML;
             }
         }
    
        // 利用闭包
        for (var i = 0; i < d.length; i++) {
            d[i].onclick = (function (i) {
                return function () {
                    console.log(i)          // 
                    d[i].innerHTML += d[i].innerHTML;
                }
            })(i)
        }
    
        // 将每个i 保存到d[i]中的 index 属性中, 利用this.index 获取到 对应的 i
        for (var i = 0; i < d.length; i++) {
            d[i].index = i;
            d[i].onclick = function () {
                console.log(this.index)
                d[this.index].innerHTML += d[this.index].innerHTML;
            }
        }
    };
    

    首先 , JavaScript是没有块级声明的概念的, 这样导致了 for循环中 这个i 是一直使用同一个变量的,而因为我们点击事件绑定的方法并没有将当时循环中的 i 保存下来,导致方法用的i 都是for循环之后的i 变量,加入循环了5次, 最终变量 i 已经变为5了, 而此时我们 使用的di 是没有这个元素的,因此控制台给我们报错了, 通过闭包,或者将循环中的i 保存到d[i]本身的属性里面, 都能解决你的问题, 最后还是得靠你自己去理解闭包 和 this的概念

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(8条)

报告相同问题?

悬赏问题

  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 Arcgis相交分析无法绘制一个或多个图形