我使用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.

我们如何解决这个问题？那么，我们利用一个叫做闭包的东西。闭包是一个函数，它将“保存”我的值并将它传递给你的点击处理程序。关于闭包有大量的文档，虽然它是一个更高级的JS主题，我会建议阅读它。

无论如何，这里是你将如何使用闭包来解决这个问题：

for (i = 0; i < tabBtn.length; i++) { 
    //Here is our 'closure' an Immediately Invoked anonymous function whose job is to pass (i)! 
    (function(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"; 
     } 
     } 
    } 
    //Here we pass it (i) at the run time. 
    })(i); 
} 

检查更新的演示在这里： https://jsfiddle.net/vwc42r9x/21/