时间戳

首页 > 解决方案 > Javascript 仅在类 XY 处于活动状态时显示元素

javascript - Javascript 仅在类 XY 处于活动状态时显示元素

问题描述

这是我在此的头一篇博文。

我有一个大问题。我目前在训练营中。我有一个网站和部分

const bookmarkButton = document.querySelectorAll('.pictureBook')
bookmarkButton.forEach(function (setIt) {
  setIt.addEventListener('click', () => {
    setIt.classList.toggle('bookmarkChecked')
  })
})
.pictureBook {
  all: unset;
  background-image: url(/img/bookmark-svgrepo-com.svg);
  background-size: cover;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -15px;
  right: -10px;
  cursor: pointer;
  opacity: 0.5;
}
.bookmarkChecked {
  opacity: 1;
}
  <section class="main__section">
    <h2 class="question__title">Frage</h2>
    <p class="question__text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla eius
      voluptatibus modi voluptates nisi quam expedita fugiat repudiandae
      animi ab.
    </p>
    <button class="pictureBook"></button>
    <button class="showanswer__btn">Antwort anzeigen</button>
    <p class="answershowed hideanswer">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. A nemo
      libero tempore dolore numquam dolorum sed cumque nihil explicabo
      ullam.
    </p>
  </section>

现在我可以单击书签“svg”并且不透明度达到 100%（书签集，黑色）

我有一个按钮。我想要，只显示我添加的“类”，以便为它添加书签。我在极限。谷歌没有帮助。也许你可以？

当我单击页脚中的另一个按钮时，该站点仅显示带有类 bookmarkChecked 的活动部分。

非常感谢。

标签： javascripthtmlcss

解决方案

带有书签的按钮具有 bookmarkChecked 类。因此，您可以使用 querySelectorAll仅选择带书签的按钮。

  1. 使用forEach循环遍历按钮列表。
  2. 在回调内部使用最接近的方法forEach获取每个按钮的相应部分
  3. 现在您可以使用一个类来隐藏带书签的部分以设置不显示。
  4. 如果所有这些都需要在单击按钮后发生，请在addEventListener.

推荐阅读