javascript - 本地主机上的循环变量设置，而不是实时站点上的循环变量设置

Question

作为一个狂热的浏览器(但从未发布过)，我首先要说的是，提前感谢您的任何见解。

我正在为我的雇主代码部门制作一个页面，该部门需要使用动态下拉菜单，因为每页的下拉菜单数量会有所不同。

上下文:

最初我们使用的是标准的 Bootstrap 下拉菜单，但我们的客户处理的一些 Web 提供商没有在 Bootstrap 中加载。我最初的想法是侧面加载它，但是，我们正在开发必须适用于我们所有客户及其所有 Web 提供商的模板。长话短说，bootstrap CSS 文件会覆盖各种未考虑 bootstrap 的网站，存在稳定性问题。

关于问题:

这是我的 CodePen供您查看。

dropdown = () => {
const dropdown = document.getElementsByClassName("dropdown");
for (let i = 0; i < dropdown.length; i++) {
  const activeDropdown = dropdown[i].id,
        down = "#downChev-" + activeDropdown,
        up = "#upChev-" + activeDropdown,
        downIcon = document.querySelector(down),
        upIcon = document.querySelector(up),
        dropdownNumID = "#" + activeDropdown,
        dropdownID = "#dropdown-" + activeDropdown;

  if (event.target.matches(dropdownNumID)) {
    if (upIcon.classList.contains("show-icon")) {
      upIcon.classList.remove("show-icon");
      downIcon.classList.add("show-icon");
    } else if (downIcon.classList.contains("show-icon")) {
      downIcon.classList.remove("show-icon");
      upIcon.classList.add("show-icon");
    }
    document.querySelector(dropdownID).classList.toggle("dropdown-show")
  }
 }
}

目前，我已经构建了一个动态下拉系统，该系统利用每个下拉列表的特定 ID。问题在于，在通过下拉菜单创建支持变量的第一个循环中，它不会创建 activeDropdown 变量，而是在记录时返回一个空白变量。

我已经在多种情况下进行了故障排除，并得出以下结论:

1. 在本地主机和 CodePen 中，代码似乎运行良好。添加到事件站点后，它会在循环内初始化 activeDropdown 变量时中断，并在记录时返回空白变量。
2. 如果我在循环中设置变量后立即删除 if 条件，并记录 activeDropdown 变量。它记录良好。这让我相信这可能是一个同步问题。然后，我将 if 条件转换为它自己的函数并添加了一个 settimeout，允许在新的延迟函数中运行执行项之前初始化变量。添加后，activeDropdown 变量不再正确设置。它只是在记录时返回空白。

我不确定我的执行逻辑是否错误，或者我是否将整个事情复杂化了。这里唯一真正的目标是创建一个动态结构，允许我的前端开发团队随意添加或删除模型 div，随着列表的增长对 ID 进行简单修改。

我们无权访问的其他脚本也可能在实时站点上造成问题。不过，我想你们会发现我的代码有问题的，哈哈。

Answer 1

很难知道发生了什么，因为您的生产环境可能与代码笔有很大不同，但我认为可能会发生一些事情。

1) 可能是 JavaScript 在整个页面加载之前运行。确保与 CodePen 等效的 JavaScript 代码最后加载到页面上。 (即将 <script></script> 标记放在文档的最后)。

2) 某些变量可能会发生冲突，因为您是在全局范围内将 JavaScript 直接加载到文档正文中。我有一些一般的文体建议可以帮助您解决问题:

通过查看您的 CodePen，您正在使用两种不同的方法来对点击事件使用react:您已经设置了一个事件监听器，并在 window.onclick 上进行了回调。 ，以及 2) 一个名为 dropdown 的函数您附加到 onclick HTML 中的属性。

我建议远离内联 onclick属性，而是将事件监听器添加到下拉列表的容器中。这样您的标记就不会与下拉 JS 耦合，并且您正在收听该容器内的点击，而不是整个应用程序。您可以使用相同的事件监听器来打开下拉菜单和关闭下拉菜单。 See this stackoverflow post for more information about this .

此外，我建议在您的代码周围添加一个包装函数，以防止您污染全局范围。该函数可以在页面加载时立即调用，并将在容器上添加事件监听器。 You can read more about IIFE's here.

这里是CodePen证明这两个建议。虽然我不知道这是否能帮助您解决问题，但希望您至少能学到一些新东西!