javascript - 一個(gè)js選項(xiàng)卡的例子中某次遍歷的意思不太懂。。。
問題描述
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style>*{ margin:0; padding: 0;}.active{ background: red;}#main p{ width: 200px; height: 200px; background: yellow; display: none;} </style> <script>window.onload=function(){ var op = document.getElementById(’main’); var oIp = op.getElementsByTagName(’input’); var ap = op.getElementsByTagName(’p’); for(var i=0;i<oIp.length;i++) {oIp[i].index=i;oIp[i].onclick=function(){ for(var i=0;i<oIp.length;i++) // 就是這兒 {oIp[i].className='';ap[i].style.display=''; } this.className='active'; ap[this.index].style.display='block'} }} </script></head><body> <p id='main'><input type='button' value='111'><input type='button' value='222'><input type='button' value='333'><input type='button' value='444'><p style='display: block'>1</p><p>2</p><p>3</p><p>4</p> </p></body></html>
這是一個(gè)網(wǎng)上的選項(xiàng)卡的例子，然后不太懂例子中js部分，第二次for循環(huán)的意思是什么。。。QAQ
問題解答
回答1：外面一層的for，主要是為了給每一個(gè)選項(xiàng)卡按鈕綁定onclick事件。
而里面的這個(gè)for，是在綁定的onclick事件之內(nèi)，它的作用是，當(dāng)點(diǎn)擊了被綁定的選項(xiàng)卡時(shí)，遍歷所有的選項(xiàng)卡，把不是當(dāng)前點(diǎn)擊的選項(xiàng)卡都重置成隱藏狀態(tài)，然后這個(gè)for下面的：
this.className='active';ap[this.index].style.display='block';
是把當(dāng)前點(diǎn)擊項(xiàng)對應(yīng)的標(biāo)簽頁顯示出來。
這樣，就只有當(dāng)前點(diǎn)擊項(xiàng)對應(yīng)的標(biāo)簽會顯示出來，其余的標(biāo)簽頁都被隱藏。如果沒有這個(gè)for，當(dāng)你點(diǎn)擊第一個(gè)標(biāo)簽，第一個(gè)標(biāo)簽顯示出來。然后你點(diǎn)擊了第二個(gè)標(biāo)簽，第二個(gè)標(biāo)簽顯示出來，現(xiàn)在就有第一個(gè)和第二個(gè)標(biāo)簽頁同時(shí)顯示；接著你點(diǎn)擊了第三個(gè)標(biāo)簽，前面兩個(gè)沒有隱藏，而第三個(gè)標(biāo)簽頁顯示出來，…………這樣，到最后，你點(diǎn)完所有的標(biāo)簽按鈕時(shí)，所有的標(biāo)簽頁都顯示出來，這顯然不是標(biāo)簽頁的效果。
為了使當(dāng)前點(diǎn)擊之外的標(biāo)簽頁都隱藏掉，所以在顯示當(dāng)前標(biāo)簽頁之前，先用for遍歷，把所有標(biāo)簽頁隱藏。
回答2：大致的功能是要實(shí)現(xiàn)點(diǎn)擊切換到該選項(xiàng)卡。所謂切換，就是其他隱藏，當(dāng)前顯示。而你說的那部分就是隱藏所有 input 的。就是每次點(diǎn)擊是，都遍歷一次 所有 input, 去掉 class 和 display 屬性，藏起來，然后單單為 this, 也就是當(dāng)前點(diǎn)擊項(xiàng)加上 class 和 display 屬性，顯示出來
回答3：我給代碼打上注釋，看到注釋就知道了！代碼原理就是先清除所有input的類名和隱藏所有的p，然后給當(dāng)前點(diǎn)擊的input加上類名，顯示當(dāng)前索引對應(yīng)的p!
<script> window.onload=function() {var op = document.getElementById(’main’);var oIp = op.getElementsByTagName(’input’);var ap = op.getElementsByTagName(’p’);//遍歷inputfor(var i=0;i<oIp.length;i++){ //自定義屬性index，（） oIp[i].index=i; //給每一個(gè)input綁定點(diǎn)擊事件 oIp[i].onclick=function() { //首先，清除掉所有的input的類名和p的樣式（就是讓所有p先隱藏）。for(var i=0;i<oIp.length;i++) // 就是這兒{ oIp[i].className=''; ap[i].style.display='';}//當(dāng)前的input添加類名this.className='active';//根據(jù)當(dāng)前input的索引，把對應(yīng)的索引的p加上樣式（就是讓對應(yīng)的索引的p現(xiàn)實(shí)）ap[this.index].style.display='block' }} } </script>
相關(guān)文章：
1. php - 請問大批量數(shù)據(jù)處理，如何分割？2. javascript - vue過渡效果 css過渡 類名的先后順序3. MySQL主鍵沖突時(shí)的更新操作和替換操作在功能上有什么差別(如圖)4. 數(shù)據(jù)庫 - Mysql的存儲過程真的是個(gè)坑！求助下面的存儲過程哪里錯(cuò)啦，實(shí)在是找不到哪里的問題了。5. html5和Flash對抗是什么情況？6. css右浮動字的順序顛倒了7. ios - 類似微博首頁，一張圖的時(shí)候是如何確定圖大小的？8. javascript - 我是做web前端的，公司最近有一個(gè)項(xiàng)目關(guān)于數(shù)據(jù)統(tǒng)計(jì)的！9. javascript - 如何使用loadash對[object,object,object]形式的數(shù)組進(jìn)行比較10. javascript - vuejs+elementui 購物車價(jià)格計(jì)算，點(diǎn)擊加減號修改數(shù)量總價(jià)都不會改變，但是計(jì)算執(zhí)行了
網(wǎng)公網(wǎng)安備