时间戳

首页 > 解决方案 > 单击时将活动类切换到按钮

javascript - 单击时将活动类切换到按钮

问题描述

编写当前代码后，我可以选择带有 mobile__CTA--btn 类的第一个按钮，并在单击时切换“活动”类。当我单击下一个按钮尝试切换“活动”类时，第一个按钮未分配该类，但我无法将“活动”类分配给下一个按钮。有什么建议么？

const callToActionBtns = document.querySelectorAll(".mobile__CTA--btn");

callToActionBtns.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    const currentBtn =
      e.target.parentElement.querySelector(".mobile__CTA--btn");
    currentBtn.classList.toggle("active");
  });
});
.active {
  color          : white;
  border-bottom  : 5px solid $purple;
  padding-bottom : 1rem;
}
<div class="mobile__CTA">
  <button id="overview-btn"  class="mobile__CTA--btn"> OVERVIEW </button>
  <button id="structure-btn" class="mobile__CTA--btn"> STRUCTURE </button>
  <button id="surface-btn"   class="mobile__CTA--btn"> SURFACE   </button>
</div>

标签： javascript

解决方案

这：

const currentBtn =
      e.target.parentElement.querySelector(".mobile__CTA--btn");
currentBtn.classList.toggle("active");

获取父div容器，找到该类的第一个元素mobile__CTA--btn（即第一个按钮）并切换该类。

相反，您应该循环callToActionBtns并删除 class active，然后active为事件目标切换 class ：

const callToActionBtns = document.querySelectorAll(".mobile__CTA--btn");

callToActionBtns.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    callToActionBtns.forEach(f => f.classList.remove('active'));
    e.target.classList.toggle("active");
  });
});
.active {
  color: white;
  border-bottom: 5px solid $purple;
  padding-bottom: 1rem;
}
<div class="mobile__CTA">
  <button id="overview-btn" class="mobile__CTA--btn">OVERVIEW</button>
  <button id="structure-btn" class="mobile__CTA--btn">STRUCTURE</button>
  <button id="surface-btn" class="mobile__CTA--btn">SURFACE</button>
</div>

如果您希望能够取消切换当前按钮，只需if在循环时添加一条语句，检查当前循环通过的项目是否是目标元素：

const callToActionBtns = document.querySelectorAll(".mobile__CTA--btn");

callToActionBtns.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    callToActionBtns.forEach(f => f != e.target ? f.classList.remove('active') : '');
      e.target.classList.toggle("active");
  });
});
.active {
  color: white;
  border-bottom: 5px solid $purple;
  padding-bottom: 1rem;
}
<div class="mobile__CTA">
  <button id="overview-btn" class="mobile__CTA--btn">OVERVIEW</button>
  <button id="structure-btn" class="mobile__CTA--btn">STRUCTURE</button>
  <button id="surface-btn" class="mobile__CTA--btn">SURFACE</button>
</div>

推荐阅读