Javascript keep i variable value in loop

JavaScript的循环中保留变量i的值

又一波疫情,本来就景气的大连又一次雪上加霜。只要有希望,一切都会好的。

循环是我们常用的控制语句,在javascript中每次循环结束后其 i 值会指向最后一次的结果,这样循环注册事件时使用到 i 值便会出错

点击图片切换背景的javascript脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
<script>
var imgs = document.querySelector('ul').querySelectorAll('img')
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
// console.log(imgs[i].src);
console.log(i);
document.body.style.backgroundImage = 'url(' + imgs[i].src + ')';
}
}
</script>

直接报错:

1
Uncaught TypeError: Cannot read property 'src' of undefined

打印变量i,永远都是指向最大索引值4

1
> 4

下面是解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//第一种解决方案: this关键字
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
// console.log(imgs[i].src);
console.log(i);
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
//第二种解决方案: 自动执行函数
for (var i = 0; i < imgs.length; i++) {
(function (inner) {
imgs[inner].onclick = function () {
console.log(imgs[inner]);
}
})(i);
}
//第三种解决方案 闭包
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function (inner) {
return function () {
console.log(inner);
}
}(i);
}
//第四种解决方案 let 块级作用域
for (let i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
console.log(i);
};
}
坚持原创技术分享,您的支持将鼓励我继续创作!