6
Javascript keep i variable value in loop
source link: http://jeffsui.github.io/2021/01/11/Javascript-keep-i-variable-value-in-loop/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
JavaScript的循环中保留变量i的值
又一波疫情,本来就景气的大连又一次雪上加霜。只要有希望,一切都会好的。
循环是我们常用的控制语句，在
javascript中每次循环结束后其 i 值会指向最后一次的结果，这样循环注册事件时使用到 i 值便会出错
点击图片切换背景的javascript脚本
<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>
直接报错:
Uncaught TypeError: Cannot read property 'src' of undefined
打印变量i,永远都是指向最大索引值4
> 4
下面是解决方案
//第一种解决方案： 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);
};
}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK