首頁(yè) 猿問(wèn) 循環(huán)問(wèn)題中索引求解

循環(huán)問(wèn)題中索引求解

JavaScript

qq_頂著西瓜皮的籽_03776560 2016-10-11 16:55:16

for(var i= 0,len = oLis.length;i<len;i++){? ? ? ? ? ? ? ? ?oLis[i].index=i;? ? ? ? ? ? ? ? ?oLis[i].onclick = function() {? ? ? ? ? ? ? ? ? ? ?for(var n= 0;n<len;n++){? ? ? ? ? ? ? ? ? ? ? ? ?oLis[n].className = "";? ? ? ? ? ? ? ? ? ? ? ? ?oDivs[n].className = "hide";? ? ? ? ? ? ? ? ? ? ?}? ? ? ? ? ? ? ? ? ? ?this.className = "on";? ? ? ? ? ? ? ? ? ? ?oDivs[this.index].className = "";? ? ? ? ? ? ? ? ?}? ? ? ? ? ? ?};為什么要用到索引？直接這樣為什么不行？for(var i= 0,len = oLis.length;i<len;i++){? ? ? ? ? ? ? ? ?oLis[i].onclick = function() {? ? ? ? ? ? ? ? ? ? ?for(var n= 0;n<len;n++){? ? ? ? ? ? ? ? ? ? ? ? ?oLis[n].className = "";? ? ? ? ? ? ? ? ? ? ? ? ?oDivs[n].className = "hide";? ? ? ? ? ? ? ? ? ? ?}? ? ? ? ? ? ? ? ? ? ?this.className = "on";? ? ? ? ? ? ? ? ? ? ?oDivs[i].className = "";? ? ? ? ? ? ? ? ?}? ? ? ? ? ? ?};

查看完整描述

1 回答

堂堂堂堂糖糖糖童鞋

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

你可以自己嘗試分析一下執(zhí)行過(guò)程。
這里我說(shuō)一下，先進(jìn)行遍歷，同時(shí)為oLis[i]綁定點(diǎn)擊事件監(jiān)聽(tīng)，
然而，for循環(huán)執(zhí)行完畢后，點(diǎn)擊事件并未出發(fā)，而i的值變?yōu)閛Lis.length，因?yàn)閕為全局作用域變量

當(dāng)我們觸發(fā)點(diǎn)擊事件時(shí)，執(zhí)行回調(diào)函數(shù)，此時(shí)是執(zhí)行的是

oLis[i].onclick?=?function()?{
????//此時(shí)i已經(jīng)變?yōu)榱薿Lis.length
?????oDivs[oLis.length].className?=?"";
}，

所以，需要保存當(dāng)前遍歷添加監(jiān)聽(tīng)元素的下標(biāo)到元素的index屬性中，方便在之后查找到對(duì)應(yīng)得元素。

可以這樣寫：

for(var?i=?0,len?=?oLis.length;i<len;i++){
??????(function(i){//IIFC(即時(shí)執(zhí)行函數(shù)，并隔離i的作用域)
???????????oLis[i].onclick?=?function()?{
?????????????????????for(var?n=?0;n<len;n++){
?????????????????????????oLis[n].className?=?"";
?????????????????????????oDivs[n].className?=?"hide";
?????????????????????}
?????????????????????this.className?=?"on";
?????????????????????oDivs[i].className?=?"";
?????????????????}
??????})(i)
?};

ES6的話：

for(let?i=?0,len?=?oLis.length;i<len;i++){//塊級(jí)作用域聲明let，存在兼容性，了解即可
???????oLis[i].onclick?=?function()?{
????????????for(var?n=?0;n<len;n++){
?????????????????oLis[n].className?=?"";
?????????????????oDivs[n].className?=?"hide";
?????????????}
?????????????this.className?=?"on";
?????????????oDivs[i].className?=?"";
????????}
?};

反對(duì) 回復(fù) 2016-10-12