首頁猿問 js關(guān)于簡單選項(xiàng)表的一些疑問？

js關(guān)于簡單選項(xiàng)表的一些疑問？

JavaScript

qq_藥藥_0 2017-04-12 13:46:09

學(xué)了10天樣子的JS找了些題來練習(xí)，很多不明白。希望大家?guī)蛶兔?，先上代碼。.active ? ?{ ? ? ? ?background:#9CC; ? ?} ? ?.div2 ? ?{ ? ? ? ?width:300px; ? ? ? ?height:200px; ? ? ? ?border:1px #666666 solid; ? ? ? ?display:none; ? ?}</style> ? ?<script> ? ? ? ?window.onload=function(){ ? ? ? ? ? ?var odiv=document.getElementById('div1'); ? ? ? ? ? ?var btn=odiv.getElementsByTagName('input'); ? ? ? ? ? ?var div2=odiv.getElementsByTagName('div') ; ? ? ? ? ? ?for(i=0;i<btn.length;i++) ? ? ? ? ? ?{ ? ? ? ? ? ? ? ?btn[i].index=i; ? ? ? ? ? ? ? ?btn[i].onclick=function() ? ? ? ? ? ? ? ?{ ? ? ? ? ? ? ? ? ? ?for(i=0;i<btn.length;i++) ? ? ? ? ? ? ? ? ? ?{ ? ? ? ? ? ? ? ? ? ? ? ?btn[i].className='';? ? ? ? ? ? ? ? ? ? ? ? ?div2[i].style.display='none'; ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ?this.className='active'; ? ? ? ? ? ? ? ? ? ?div2[this.index].style.display='block'; ? ? ? ? ? ? ? ?} ? ? ? ? ? ?} ? ? ? ?} ? ?</script></head><body><div id="div1"> ? ?<input type="button" ?class="active" value="1"/> ? ?<input type="button" value="2"/> ? ?<input type="button" value="3"/> ? ?<input type="button" value="4"/> ? ?<div class="div2" style="display:block;">11</div> ? ?<div class="div2">22</div> ? ?<div class="div2">33</div> ? ?<div class="div2">44</div></div></body>代碼是抄襲網(wǎng)上的，運(yùn)行過能行。但是不能理解加粗，下劃線的兩行代碼。1‘?btn[i].index=i;這一句的index是索引位置，但是感覺遍歷btn就知道了位置。改為自定義的屬性a,b測試過都行，這個(gè)理解不知到對(duì)不對(duì)。2’div2[this.index].style.display='block';這個(gè)this.index應(yīng)該大致等于?btn[i].index，但是為什么不能寫成div2[btn[1].index]和div2[i]。3‘div2沒有遍歷過為什么和input是對(duì)應(yīng)的，點(diǎn)input2就是div2

查看完整描述

1 回答

已采納

qq_茬芐迷茫_03118827

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

1.btn[i].index=i 是生成了（btn[0].index=0; btn[1].index=1; ?btn[2].index=2;btn[3].index=3;） index的英文是指數(shù)的意思這就是自定義用index而不用a ?b的原因，（單純的為了方便使用）這里是為了給每一個(gè)btn按照0-3順序添加一個(gè)指數(shù)。

2.this.index是只當(dāng)前點(diǎn)擊的那個(gè)btn的指數(shù)；btn[1].index 根據(jù)1中賦值他的指數(shù)就是1，是個(gè)定值；div2[i]表達(dá)的是for循環(huán)內(nèi)最后一個(gè)值，（因?yàn)閖s的一塊一塊執(zhí)行的執(zhí)行到for時(shí)它在接到.onclick的指量時(shí)會(huì)循環(huán)完畢然后輸出）div2[i]就只能表示為div2[3]，也是一個(gè)定值。

3.點(diǎn)input就是相應(yīng)的div2是因?yàn)??div2[this.index] ?因?yàn)樗窃赽tn[i].onclick=function(){}的函數(shù)內(nèi)，所以此處的this代表的是點(diǎn)擊的那個(gè)btn，而在最初的for循環(huán)里所有的btn已經(jīng)被遍歷并賦上的相應(yīng)的i值，所有自處的this.index=btn[i].index

此處的i是你點(diǎn)擊的那個(gè)btn的指數(shù)。（去百度下js的this解釋，能幫你更好的理解）

反對(duì) 回復(fù) 2017-04-13