Javascript选项卡-用于循环说明

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循环的目的是什么？为什么有一个"i"变量？为什么在条件中使用tabcontent/links.length？

如果你能给我任何帮助，我将不胜感激。非常感谢。

Answer 1

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

在本例中，您将使用类"tablinks"获取所有元素，并将它们保存在名为tablinks的变量中。把这个变量想象成一个盒子。

tablinks = document.getElementsByClassName("tablinks");

现在，您将对框中的每个元素(tablink)执行一个操作。

你首先声明一个伪变量"i"，这个变量在循环中生存和死亡，你用值零(0)初始化变量，这应该是部分"i=0"，你用这个变量迭代框中的元素。

盒子里有N个元素。要知道有多少元素，请使用tabliks.length，属性长度告诉变量tablink中的tablink数量。

现在您启动了一个变量i=0，您需要重复指令"tablink.length"次，所以每次运行迭代时都需要增加计数器"i"，这是使用"i++"部分完成的。

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

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

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

如果框中有3个元素，并且变量i以值0开头，则条件"i<tablinks.length"对于值i=0,1和2为真。当i=3时，条件为false，并且您退出循环，因此您进行了3次迭代。

希望我能告诉你。

谨致问候。

Answer 2

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

循环中的变量"i"代表索引，使用字母i只是惯例。

函数getElementsByClassName("tabcontent")将返回一个类名为"tabcontent"的所有元素的集合。"小报"也是如此。

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

tabcontent[i]将访问该元素，因此在循环的第一步中，当i=0时，tabcontent[0]将为我们提供第一个元素，因为数组总是从0开始。

因此，在本例中，循环将进行0、1、2，然后终止，因为条件i<tabscontent.length在i=3时不满足。

尝试阅读更多关于For Loops的信息：https://www.w3schools.com/js/js_loop_for.asp

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