javascript - jquery下拉菜单解释

Question

我是 javascript/jquery 的新手，还不是很了解。我正在尝试使用 jquery 学习下拉菜单，我找到了这个 w3school 教程，但是，我似乎无法理解代码的某些部分 http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown

我的意思是我几乎了解所有内容

    window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

我知道什么是 for 循环以及它是如何工作的，但我不明白 i 在涉及 html 文件中的 div 时是如何工作的。例如 var dropdowns 有一个 div，里面有一个类 dropdown-content。然后这个 var 用于具有 length 属性的 for 循环，但我不明白那个 var 的长度是多少。它是 1 吗？然后是 var openDropdown = dropdowns[i] 这行？ var i 是 0 但它从 var 下拉列表中获取了什么？

Answer 1

   var dropdowns = document.getElementsByClassName("dropdown-content");

这会返回一个对象，您可以使用索引对其进行迭代(为 0,1...取决于返回的匹配元素的数量...)

同样，由于 i 的值被初始化为 0...使用 dropdown[i] 将完全变成 dropdown[0] 如果你有更多的匹配项，它也会完成这项工作，而不是重新写同样的东西..

希望这对你有帮助...:D