已解決430363個問題，去搜搜看，總會有你想問的

循環問題中索引求解

首頁猿問循環問題中索引求解

循環問題中索引求解

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貢獻101條經驗獲得超58個贊

你可以自己嘗試分析一下執行過程。
這里我說一下，先進行遍歷，同時為oLis[i]綁定點擊事件監聽，
然而，for循環執行完畢后，點擊事件并未出發，而i的值變為oLis.length，因為i為全局作用域變量

當我們觸發點擊事件時，執行回調函數，此時是執行的是

oLis[i].onclick?=?function()?{
????//此時i已經變為了oLis.length
?????oDivs[oLis.length].className?=?"";
}，

所以，需要保存當前遍歷添加監聽元素的下標到元素的index屬性中，方便在之后查找到對應得元素。

可以這樣寫：

for(var?i=?0,len?=?oLis.length;i<len;i++){
??????(function(i){//IIFC(即時執行函數，并隔離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++){//塊級作用域聲明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?=?"";
????????}
?};

反對回復 2016-10-12

1 回答
0 關注
1137 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

循環問題中索引求解

循環問題中索引求解

1 回答

添加回答