Question

我到处寻找一个“猴子级别”的解释，但在任何地方都找不到。我正在研究JS，我试图在页面内创建标签，一切都很好，除了我无法理解W3SCHOOLS示例中的一段代码。

HTML：

[][]

JS：

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

问题：

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

非常感谢你的任何帮助。谢谢！

Answer 1

在这个具体的例子中，第一个for循环用于遍历每个具有类名＆＃34; tabcontent＆＃34;的元素，第二个每个元素都具有类名＆＃34; tablinks＆＃34;

变量＆＃34; i＆＃34;在一个循环中代表索引，它只是使用字母i的惯例。

函数getElementsByClassName（＆＃34; tabcontent＆＃34;）将返回所有元素的集合，其中包含类名＆＃34; tabcontent＆＃34;。对于＆＃34; tablinks＆＃34;它是一样的。

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

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

因此，在这个例子中，循环将变为0,1,2然后终止，因为条件i <1。当i = 3时，不满足tabscontent.length。

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

和数组： https://www.w3schools.com/js/js_arrays.asp

Answer 2

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

在这个例子中，你将获得类＆＃34; tablinks＆＃34;的元素。并将它们保存在名为tablinks的变量中。想象一下这个变量就像一个盒子。

tablinks = document.getElementsByClassName("tablinks");

现在，您将对框中的每个元素（tablinks）执行操作。

你首先声明一个虚拟变量＆＃34; i＆＃34;，这个变量在循环中生存和死亡，你用值零（0）初始化变量，这应该是部分＆＃34; i = 0＆＃34;，您使用此变量迭代框中的元素。

框中有N个元素。要知道有多少元素，你使用tablikns.length，属性长度告诉你变量tablink中tablinks的数量。

现在你开始了一个变量i = 0，你需要重复说明＆＃34; tablink.length＆＃34;时间，所以你需要递增计数器＆＃34; i＆＃34;每次运行迭代时，都可以使用＆＃34; i ++＆＃34;一部分。

当计数器达到tablinks.length值时，您将停止迭代并继续执行其余代码。这是部分：＆＃34;我＆lt; tablinks.length＆＃34;

最后所有内容都是这样写的。

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

如果框中有3个元素并且您使用值0启动变量i，则条件＆＃34; i＆lt; tablinks.length＆＃34;对于值i = 0,1和2是正确的。当i = 3时，条件为假并退出循环，因此您进行了3次迭代。

希望我能清楚地告诉你。

问候。

Javascript标签 - 用于循环说明

2 个答案: