私のhtml、css＆Javascriptで作成したタブパネルが動作しません

Question

Javascriptでタブ付きパネルを作成しました。私はプログラミングをしなくてもそれをやっていますが、うまくいきますが、いくつかの条件文とループ文を置いた後はうまくいきません。いくつかの問題は、javascriptでプログラムを作るときに来ています。ここをクリックしてjsfiddleのコーディング全体を見て、エラーを修正する方法を教えてください。おかげ

HTML：

<button class="tabButton">Tab 01</button> 
<button class="tabButton">Tab 02</button> 
<button class="tabButton">Tab 03</button> 
<button class="tabButton">Tab 04</button> 
<button class="tabButton">Tab 05</button> 

<div class="tabPanel" style="display:block"> 
    <h3>Tab panel 01</h3> 
    <p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in rebus apertissimis nimium longi sumus. Quicquid porro animo cernimus, id omne oritur a sensibus; Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Philosophi autem in suis lectulis plerumque moriuntur. Falli igitur possumus. 
    </p> 
</div> 

<div class="tabPanel"> 
    <h3>Tab panel 02</h3> 
    <p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in rebus apertissimis nimium longi sumus. Quicquid porro animo cernimus, id omne oritur a sensibus; Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Philosophi autem in suis lectulis plerumque moriuntur. Falli igitur possumus. 
    </p> 
</div> 

<div class="tabPanel"> 
    <h3>Tab panel 03</h3> 
    <p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in rebus apertissimis nimium longi sumus. Quicquid porro animo cernimus, id omne oritur a sensibus; Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Philosophi autem in suis lectulis plerumque moriuntur. Falli igitur possumus. 
    </p> 
</div> 

<div class="tabPanel"> 
    <h3>Tab panel 04</h3> 
    <p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in rebus apertissimis nimium longi sumus. Quicquid porro animo cernimus, id omne oritur a sensibus; Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Philosophi autem in suis lectulis plerumque moriuntur. Falli igitur possumus. 
    </p> 
</div> 

<div class="tabPanel"> 
    <h3>Tab panel 05</h3> 
    <p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in rebus apertissimis nimium longi sumus. Quicquid porro animo cernimus, id omne oritur a sensibus; Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Philosophi autem in suis lectulis plerumque moriuntur. Falli igitur possumus. 
    </p> 
</div> 

CSS：

.tabPanel{ 
    width:500px; 
    height:150px; 
    background-color:grey; 
    margin:0; 
    padding:20px; 
    display:none; 
} 

Javascriptを：

for (i=0; i<tabBtn.length; i++) { 
    tabBtn[i].onclick = function(){ 
      for(r=0; r<panel.length; r++){ 
        if (i==r){ 
        panel[r].style.display = "block"; 
        } else { 
        panel[r].style.display = "none"; 
        } 
      } 
    } 
} 

https://jsfiddle.net/suhailyazdan/vwc42r9x/17/

Answer 1

ここで何が起こっているが、その時点で「Oでありますnclick 'ハンドラが実行されると、forループは既に完了しています。

このように考える：Javascriptはforループに遭遇し、5回ループし、ハンドラを接続してforループを終了する。

tabBtnをクリックすると、内部に格納されているforループの最終値を持ちます。 iは常に5に等しくなります。クリックハンドラ内でconsole.log(i)を試してください。それは常に5と表示されます。

どうすれば修正できますか？さて、クロージャと呼ばれるものを利用しています。クロージャは、iの値を '保存'してクリックハンドラに渡す関数です。クロージャに関するドキュメントはたくさんありますが、それはより高度なJSトピックですが、それを読むことをお勧めします。 ... https://jsfiddle.net/vwc42r9x/21/