1.var會(huì)導(dǎo)致變量提升,如果你在for循環(huán)中var了i,那么在該作用域中是可以找到i的
如for(var i =0;i<5;i++){}
console.log(i) //5

2.let是Es6中的聲明方式,但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。
for(let i =0;i<5;i++){}
console.log(i) //報(bào)錯(cuò)
詳見:http://es6.ruanyifeng.com/#do...

你可以打個(gè)斷點(diǎn)就知道了，在onclick里面，執(zhí)行進(jìn)去的時(shí)候，i的值應(yīng)該是homeTravelItemIcon.length了
找不到相關(guān)的DOM節(jié)點(diǎn)，所以報(bào)錯(cuò)的。

在里面直接用this吧

let homeTravelItemImg = document.getElementsByClassName("item-img");

let homeTravelItemIcon = document.getElementsByClassName("item-icon");

for (var i = 0; i < homeTravelItemIcon.length; i++) {
    homeTravelItemIcon[i].onclick = function() {
        this.style.opacity = '1';
        this.style.display = 'none';
    }
}

//主要是非方法內(nèi)部用var定義的話，相當(dāng)于全局的，任何地方都可以訪問到,瀏覽器引擎解析的時(shí)候也就不會(huì)
在內(nèi)部開辟一個(gè)局部變量，而直接引用外部變量的地址了。

//使用let的方式應(yīng)該跟以下這種方式是一致的。

for (var i = 0; i < homeTravelItemIcon.length; i++) {
  
    (function(i){homeTravelItemIcon[i].onclick = function() {
        homeTravelItemImg[i].style.opacity = '1';
        homeTravelItemIcon[i].style.display = 'none';
    }})(i);
}

變量提升
作用域

看這里 https://segmentfault.com/a/11...