Javascript for循环遍历图片显示不出来

Question

Javascript for循环遍历图片显示不出来

控制台提示bgIm[i]的类型是undefined，但是不用循环直接bgImg[0]就可以显示图片

控制台显示：

Answer 1

因为你需要在事件内使用事件外的循环变量i。
当事件触发时，那个循环早就结束了，那时的i的值已经是循环最大值加1了。
所以需要用一些方式保存住当前循环的i的值。

方案一：用闭包保存住当前循环的i的值

for (var i = 0; i < n; i++) {
    (function(i){
        bgImg[i].onload = function () {
            console.log(bgImg[i]);
        }
    })(i);
}

方案二：用let块作用域变量

for (let i = 0; i < n; i++) {
    bgImg[i].onload = function () {
        console.log(bgImg[i]);
    
    }
    
}

方案三：为事件元素设置一个index属性，在事件函数内通过this获取当前对象并访问index属性。

for (var i = 0; i < n; i++) {
    bgImg[i].index = i;
    bgImg[i].onclick = function () {
        console.log(bgImg[this.index]);
    }
}