html, css 및 Javascript로 만든 탭 패널이 작동하지 않습니다.

Question

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; 
} 

자바 스크립트 :

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

여기에서 일어나고있는 것은 그 시간을 기준으로 '오 nclick '핸들러가 실행되면 for 루프가 이미 완료된 것입니다.

다음과 같이 생각하십시오. Javascript는 for 루프를 만나고, 5 회 반복하고, 핸들러를 부착 한 다음 for 루프를 종료합니다.

tabBtn을 클릭하면 내부에 저장된 for 루프의 최종 값을가집니다. i은 항상 5와 같습니다. 클릭 처리기 내에서 직접 console.log(i)을 시도하면 항상 5임을 알 수 있습니다.

어떻게 해결할 수 있습니까? 글쎄, 우리는 폐쇄라고하는 것을 이용합니다. 클로저는 i의 값을 '저장'하고 클릭 핸들러로 전달하는 함수입니다. 클로저에 관한 많은 문서가 있으며,보다 고급 JS 주제이지만 필자는 그것에 대해 읽어 볼 것을 권할 것이다.

어쨌든, 여기 당신이 그것을 해결하기 위해 폐쇄을 사용하는 방법입니다 ... https://jsfiddle.net/vwc42r9x/21/