js动态绑定事件,无法使用for循环中变量i的问题

2020-07-20 01:13

小闫语录:我一直在幻想,那些伟大的预言家都来自未来,那些畅销小说家都是真实经历过...

每天不是在写 bug,就是在解 bug 的路上~更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

1.问题描述

在一个 for 循环中,我动态给一堆 a 标签绑定 onclick 事件时,发现点击事件不正确。如下代码:

var link = document.getElementsByClassName("link");
for (var i = 0; i < link.length; i++) {
  link[i].onclick = function() {
    alert(i);
  };
}

我需要的是,点击第一个链接,弹出 0,点击第二个链接,弹出 1......以此类推。但是上述代码点击每一个链接总是弹出一个值,而且还是个不正常的值。之所以说它不正常,是因为上面我获取到了 5 个标签,正常下标应该到 4 结束,但是总是弹出 5 ????

答:那是因为事件函数是一个匿名函数,此函数会在 for 循环执行之后调用。调用时,发现内部没有定义变量 i ,所以就去外面找一下,发现外层有,就取外层的值了,但是为什么是 5 呢?那是因为 for 循环的结束条件是 i 不满足 i<5 ,那么结束后变量 i 的值就是 5,匿名函数到外层取值正好取到了它。更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

2.解决方法

可以采用自定义属性的方式:

var link = document.getElementsByClassName("link");
for (var i = 0; i < link.length; i++) {
  link[i].index = i;
  link[i].onclick = function() {
    alert(this.index);
  };
}
};
//微信公众号:全栈技术精选



82dafa82940df2c9417281fb9a503212.webp

a24b6d95dfadceda3b4d8d4904737ae8.webp

76fc0d5e1df81ead66f1c185d126c266.webp

7e5ddc49295ba1056280639a5153b0fa.webp

f686c813cc8e1bd66e306d4be813372f.webp

d7cb4f02a15414f0783321b953169474.webp

a4e7a64b4cb00366bacf10d28d500b3b.webp

794127001fe11e8fd8c44a2c329dc7ab.webp

2196f89a817b6aaf72b7e361a8e29965.webp



307c3f8c46fe23935e2da3af61bb6393.webp


排版:小闫

图片素材:小闫

文案:小闫

长按扫描下方二维码即刻关注小闫


6a319244df8b310902c4a200dfc9128b.webp509a85543f9c163bd697a2dff3ed84be.webp



浏览 15
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报