.toggle() 函数 w/classList 不适用于一个元素，但适用于其他元素答案

【问题标题】：.toggle() function w/ classList not working for one element but works for others.toggle() 函数 w/classList 不适用于一个元素，但适用于其他元素
【发布时间】：2022-06-30 18:12:47
【问题描述】：

当我点击时，我试图在 html 元素上添加一个类页面的另一个元素，但尽管我做了所有尝试，它仍然无法正常工作。

这是我的代码

html代码：

<div class="container">
  <div class="contenu">
    <h2>Titre du contenu</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
  </div>
  <div class="popupBtn">
  </div>
</div>

javascript 代码：

let popupBtn = document.querySelector('.popupBtn');
let container = document.querySelector('.container');

popupBtn.onclick = function() {
    container.classList.toggle('active');
    //console.log(container.classList.toggle('active'));
};

所以我认为 javascript 函数应该将“活动”类添加（或删除）到已经拥有“容器”类的元素中，但是当我取消注释时，注释的 console.log() 在每次单击时都会返回 false当我在元素上单击几次时，它应该交替返回true 和false。

但是当我替换时

container.classList.toggle('active');

通过

popupBtn.classList.toggle('active');

它工作得非常好，并为带有“popupBtn”类的元素添加了一个“活动”类。

有人遇到过这样的问题吗？我在互联网上找不到这种类型的东西。在此先谢谢大家:)

【问题讨论】：

不用替换container.classList.toggle('active');就可以正常工作

标签： javascript html jquery onclick toggle

【解决方案1】：

这是你想做的吗？

我刚刚添加了一个随机的 css 类，看看发生了什么。

let popupBtn = document.querySelector('.popupBtn');
let container = document.querySelector('.container');

popupBtn.onclick = function() {
    container.classList.toggle('active');
    //console.log(container.classList.toggle('active'));
};

.active{
  background-color: red;
}

<div class="container">
  <div class="contenu">
    <h2>Titre du contenu</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
  </div>
  <div class="popupBtn">text
  </div>
</div>

【讨论】：