首頁猿問這樣寫為什么實(shí)現(xiàn)不了效果，只用一次循環(huán)

這樣寫為什么實(shí)現(xiàn)不了效果，只用一次循環(huán)

JavaScript

qq_小輝_4 2017-08-22 11:38:51

?var li=document.getElementsByTagName("li")? var div=document.getElementsByTagName("div")? for(var i=0;i<li.length;i++){? ? ? li[i].onclick=function(){? ? ? ? ? li[i].className=""? ? ? ? ? this.className="on"? ? ? }? }

查看完整描述

3 回答

已采納

__innocence

TA貢獻(xiàn)313條經(jīng)驗(yàn) 獲得超208個(gè)贊

函數(shù)閉包問題，你的循環(huán)里面，每一個(gè)i的值都是li.length,所以這個(gè)元素不存在。

先做個(gè)試驗(yàn)：把里面兩句注釋掉，然后直接打印i的值，在控制臺(tái)看一下輸出：

?for(var?i=0;i<li.length;i++){
??????li[i].onclick=function(){
??????????//li[i].className=""
??????????//this.className="on"
??????????console.log(i);
??????}
??}

你會(huì)發(fā)現(xiàn)，你點(diǎn)擊任何一個(gè)元素，輸出的結(jié)果都是一樣的。都是li的長(zhǎng)度。

這些綁定事件都是點(diǎn)擊的時(shí)候才調(diào)用的，但加載的時(shí)候，i的值已經(jīng)變化了，由于JavaScript閉包的存在，這個(gè)i一直存在于內(nèi)存中；

var?li?=?document.getElementsByTagName('li');????
for?(var?i?=?0;?i?<?li.length;?i++)?{????
???(function(i){????
????????li[i].onclick?=?function()?{????????
????????????console.log(i);??????
????????}??
???})(i);??
}

1 反對(duì) 回復(fù) 2017-08-22