在 Javascript 中切换 forEach child div 类。（文本的背景颜色正在改变，但那些 div 的背景颜色没有）

Question

大家好，

我有这个汉堡菜单行，我想在单击它时更改它们的颜色。我尝试使用 addEventListener + toggle class，并为那些 div 使用简单的 element.style.backgroundColor（我为所有添加了相同的 class），但在这两种情况下都不起作用。虽然，文本颜色正在改变，但那些 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>

Answer 1

问题是因为 CSS specificity。当两个选择器对一个元素应用相同的样式时，具有更高特异性的选择器优先。

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

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

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

提示：浏览器dev-tools提供调试此类问题的帮助。花点时间学习如何利用它们。

在 Javascript 中切换 forEach child div 类。（文本的背景颜色正在改变，但那些 div 的背景颜色没有）

Toggle forEach child div classes in Javascript.(bgcolor of the text is changing but bgcolor of those divs NOT)

javascript

foreach

toggle

addeventlistener

queryselector