                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

大神們，請從for那開始解釋代碼原理？謝謝！

? ? ? ? ?window.onload = function(){

? ? ? ? ? ? ?var oTab = document.getElementById("tabs");

? ? ? ? ? ? ?var oUl = oTab.getElementsByTagName("ul")[0];

? ? ? ? ? ? ?var oLis = oUl.getElementsByTagName("li");

? ? ? ? ? ? ?var oDivs= oTab.getElementsByTagName("div");

? ? ? ? ? ? ?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 = "";

? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ?};

? ? ? ? ?}

? ? </script>

慕粉3598977

2016-11-05

源自：JavaScript進階篇 10-1

關注問題我要回答

692

操作

收起

2 回答

顧非白
2016-11-07

希望有所幫助

2 回復有任何疑惑可以回復我~

收起回答

qq_謎離_03319966

這里的this可以換成oLis[i]嗎為什么

2016-11-16 回復有任何疑惑可以回復我~

stone310
2016-11-05

for(var?i=?0,len?=?oLis.length;i<len;i++){??//for遍歷oLis
?????????????????oLis[i].index?=?i;??????????//保存每一個i值到對應的每一個oLis上
?????????????????oLis[i].onclick?=?function()?{?//點擊
?????????????????????for(var?n=?0;n<len;n++){????//再次對oLis遍歷
?????????????????????????oLis[n].className?=?"";??//所有oLis的class為空
?????????????????????????oDivs[n].className?=?"hide";??//所有oDiv的class為hide
?????????????????????}
?????????????????????this.className?=?"on";??????//當前點擊的oLis?的class為on
?????????????????????oDivs[this.index].className?=?"";??//當前點擊的oLis的i值所對應的oDivs的class為空
?????????????????}
?????????????};
?????????}

0 回復有任何疑惑可以回復我~

收起回答

qq_謎離_03319966

這里的this可以換成oLis[i]嗎為什么

2016-11-16 回復有任何疑惑可以回復我~

stone310 回復 qq_謎離_03319966

不可以，因為i已經是個定值，相當于oLis.length

2016-11-16 回復有任何疑惑可以回復我~