Javascript选项卡 - For循环说明
我已到处搜索“猴级”解释并找不到任何地方。我正在学习JS,并且试图在页面内创建制表符,除了我无法理解W3SCHOOLS示例中的一段代码之外,一切都很好。Javascript选项卡 - For循环说明
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?
我非常感谢您的帮助。谢谢!
当您需要多次重复一组操作时,可以使用循环。
在这个例子中,您将获得带有“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次迭代。
希望我明白你的意思。
问候。
啊,解释它!我确信.lenght计算了每个tablinks类中的字符数量,这使得我困惑,并且让我不知道它的目的是什么。再次感谢! –
在这个特定的例子中,第一个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
[MDN:'for'声明】(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement) – Andreas
是啊,我的意思是,我研究他们SoloLearn和在W3schools上。我只是不知道何时应用循环以及为什么i = 0变量。 –
我对其他一切都很了解,除了这部分内容是'(i = 0; i