Javascript选项卡 - For循环说明

Question

我已到处搜索“猴级”解释并找不到任何地方。我正在学习JS，并且试图在页面内创建制表符，除了我无法理解W3SCHOOLS示例中的一段代码之外，一切都很好。

HTML：

<div class="tab"> 
    <button class="tablinks" onclick="openCity(event, 'London')">London</button> 
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> 
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> 
</div> 

<div id="London" class="tabcontent"> 
    <h3>London</h3> 
    <p>London is the capital city of England.</p> 
</div> 

<div id="Paris" class="tabcontent"> 
    <h3>Paris</h3> 
    <p>Paris is the capital of France.</p> 
</div> 

<div id="Tokyo" class="tabcontent"> 
    <h3>Tokyo</h3> 
    <p>Tokyo is the capital of Japan.</p> 
</div> 

JS：

function openCity(evt, cityName) { 
    // Declare all variables 
    var i, tabcontent, tablinks; 

    // Get all elements with class="tabcontent" and hide them 
    tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 

    // Get all elements with class="tablinks" and remove the class "active" 
    tablinks = document.getElementsByClassName("tablinks"); 
    for (i = 0; i < tablinks.length; i++) { 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
    } 

    // Show the current tab, and add an "active" class to the button that opened the tab 
    document.getElementById(cityName).style.display = "block"; 
    evt.currentTarget.className += " active"; 
} 

问：

什么是for循环有目的？为什么会有“我”变量？为什么在条件中使用tabcontent/links.length？

我非常感谢您的帮助。谢谢！

Answer 1

当您需要多次重复一组操作时，可以使用循环。

在这个例子中，您将获得带有“tablinks”类的元素并将它们保存在一个名为tablinks的变量中。想象这个变量就像一个盒子。

tablinks = document.getElementsByClassName("tablinks"); 

现在你要对盒子中的每个元素（tablinks）执行一个动作。

您首先声明一个虚拟变量“i”，该变量在循环中生存并死亡，您使用零值（0）初始化变量，这应该是“i = 0”部分，您使用此变量遍历框中的元素。

箱子里有N个元素。要知道您有多少元素使用tablikns.length，属性长度会告诉您变量tablink中的Tablink数量。

现在你开始了一个变量i = 0，并且你需要重复指令“tablink.length”次，所以你需要在每次运行迭代时增加计数器“i”，这是通过使用“i ++ “部分。

当计数器达到值tablinks.length时，您停止迭代并继续执行其余代码。这是部分：“我< tablinks.length”

最后所有这些都是这样写的。

for (i = 0; i < tablinks.length; i++) { 
    tablinks[i].className = tablinks[i].className.replace(" active", ""); 
} 

如果在盒子3组的元素和在开始变量i值为0，条件“我< tablinks.length”为真为i的值= 0,1和2，在i = 3条件是错误的，你退出循环，所以你做了3次迭代。

希望我明白你的意思。

问候。

Answer 2

在这个特定的例子中，第一个for循环用于遍历类名为“tabcontent”的每个元素，第二个每个元素的类名都是“tablinks”。

循环中的变量“i”代表索引，它只是使用字母i的约定。

函数getElementsByClassName（“tabcontent”）将返回类名为“tabcontent”的所有元素的集合。 “tablinks”是一样的。

tabcontent.length将返回3，因为有3个类名为“tabcontent”的元素，我们希望遍历我们的循环中的所有元素。

tabcontent [I]将访问该元素，所以在我们的循环中，第一步骤i = 0时，tabcontent [0]将给予我们的第一个元素因为数组始终为0。

开始所以，在这个例子中，循环将去0，1，2，然后终止，由于条件I < tabscontent.length不满足当i = 3

尝试阅读更多关于For循环： https://www.w3schools.com/js/js_loop_for.asp

和阵列： https://www.w3schools.com/js/js_arrays.asp