。

发布于 2025-02-12 08:39:37 字数 1200 浏览 3 评论 0原文

当我单击时，我正在尝试在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函数应该添加（或删除）类'active'的类'已经“容器”，但是当我在删除它时，请在每次点击时返回false时，当我单击 true false 时，我会在每次点击时返回false。元素。

它替换时，

container.classList.toggle('active');

但是，当我用

popupBtn.classList.toggle('active');

效果很好，并在'popupbtn'类中向元素添加了“活动”类。

有人已经遇到了这样的问题吗？我在互联网上找不到任何此类。预先感谢:)

原文

I am trying to add a class on an html element when I click on
another element of the page, but despite all my attempts it keeps not working.

Here is my code

html code:

<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 code:

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

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

So I think the javascript function is supposed to add (or remove) the class 'active' to the element that owns the class 'container' already, but the commented console.log() returns false on every click when I uncomment it when it should return alternatively true and false when I click several times on the element.

However when I replace

container.classList.toggle('active');

popupBtn.classList.toggle('active');

it works perfectly fine and adds a class 'active' to the element with the 'popupBtn' class.

Has anybody already met such a problem? I don't find anything of this kind on internet.
Thanks in advance guys :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

橘和柠 2025-02-19 08:39:37

这是您想做的吗？

只需设置.contains而不是.toggle在您的console.log中。

我刚刚添加了一个随机的CSS课程，以查看正在发生的事情。

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

popupBtn.onclick = function() {
    container.classList.toggle('active');
    console.log(container.classList.contains('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>

Is this what you wanted to do?

Just set .contains instead of .toggle in your console.log.

I've just added a random css class, to see what is going on.

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

popupBtn.onclick = function() {
    container.classList.toggle('active');
    console.log(container.classList.contains('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>

回复收藏 0 原文

~没有更多了~