單擊時將活動類切換到按鈕

Question

使用當前編寫的代碼，我可以選擇帶有 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>

Answer 1

這：

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

獲取父div容器，找到類mobile__CTA--btn （這是第一個按鈕）的第一個元素並切換類。

相反，您應該循環callToActionBtns並刪除類active ，然后切換事件目標的active類：

 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>

Answer 2

只需使用箭頭函數將 btn 引用保留到事件偵聽器中：

 const callToActionBtns = document.querySelectorAll('.mobile__CTA--btn'); callToActionBtns.forEach((btn, _, AllBtn) => { btn.onclick = e => { if ( btn.classList.toggle('active')) AllBtn.forEach( btx => btx.classList.toggle('active', btx===btn )) } })

 .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>