在 Javascript 中切换 forEach 子 div 类。（文本的 bgcolor 正在改变，但这些 div 的 bgcolor 没有）答案

【问题标题】：Toggle forEach child div classes in Javascript.(bgcolor of the text is changing but bgcolor of those divs NOT)在 Javascript 中切换 forEach 子 div 类。（文本的 bgcolor 正在改变，但这些 div 的 bgcolor 没有）
【发布时间】：2020-11-01 10:39:42
【问题描述】：

大家好，

我有这个汉堡菜单行，我想在单击它时更改它们的颜色。我尝试使用 addEventListener + 切换类，以及那些 div 的简单 element.style.backgroundColor （我为所有人添加了相同的类），但在这两种情况下都不起作用。虽然，文本颜色正在改变，但这些 div 的背景颜色没有）。下面是代码。

非常感谢。

const hamburgerMenu = document.querySelector(".hamburger-menu");
const hamburgerMenuLines = document.querySelectorAll(".hamburger-menu div");

hamburgerMenu.addEventListener('click', () => {
  // (code to open menu fullscreen which works fine)
  hamburgerMenuLines.forEach((line) => {
    line.classList.toggle("changeHamburgerMenuLinesColor");
  });
});

.hamburger-menu div {
  width: 100%;
  height: 2px;
  border-radius: 30%;
  background-color: black;
  position: relative;
  margin-top: 11px;
}

.changeHamburgerMenuLinesColor {
  background-color: white;
  color: white;
}

<div class="hamburger-menu">
  <div>Text</div>
  <div>Text</div>
  <div>Text</div>
</div>

【问题讨论】：

标签： javascript foreach toggle addeventlistener queryselector

【解决方案1】：

问题是因为CSS specificity。当两个选择器在一个元素上应用相同的样式时，具有更具体的样式优先。

在您的情况下，.hamburger-menu div 与 .changeHamburgerMenuLinesColor 相比是更具体的选择器，因此使用第一个选择器设置的背景颜色（即“黑色”）将应用于每个 div 元素。

要解决这个问题，需要增加第二个选择器的特异性。如下所示编写第二个选择器将使两个选择器的特异性相等，并且从上到下的顺序后面的选择器将优先。

div.changeHamburgerMenuLinesColor {
   background-color: white;
   color: white;
}

提示：浏览器开发工具可帮助调试此类问题。花一些时间来学习如何利用它们来发挥自己的优势。

【讨论】：