在按鈕單擊時將 class 添加和刪除到項目集合（原版 JS）

Question

我有 3 個選項卡，用於在移動版本中切換表格列。 我想要實現的是單擊合適的列按鈕隱藏/顯示表格列。 我的想法是操作每個列項目 class，這對於該列中的所有元素都是相同的，但是我卡住了，我無法將隱藏的 class 添加到項目集合中。 將不勝感激任何建議。 或者也許有更好的方法來操作標簽？

 document.addEventListener('DOMContentLoaded', function() { let tabsContainer = document.querySelector('.buynow-tabs'); let tabsButtons = tabsContainer.querySelectorAll('.buynow-tabs__tab'); let basicElements = document.querySelectorAll('.table-v4__tab-basic'); let premiumElements = document.querySelectorAll('.table-v4__tab-premium'); let eliteElements = document.querySelectorAll('.table-v4__tab-elite'); for (var i = 0; i < tabsButtons.length; i++) { tabsButtons[i].addEventListener('click', function() { let current = tabsContainer.querySelectorAll('.active'); current[0].className = current[0].className.replace(' active', ''); this.className += ' active'; if (tabsButtons[0].classList.contains('active')) { basicElements.classList.remove('hidden'); premiumElements.classList.add('hidden'); eliteElements.classList.add('hidden'); } else if (tabsButtons[1].classList.contains('active')) { basicElements.classList.add('hidden'); premiumElements.classList.remove('hidden'); eliteElements.classList.add('hidden'); } else if (tabsButtons[2].classList.contains('active')) { basicElements.classList.add('hidden'); premiumElements.classList.add('hidden'); eliteElements.classList.remove('hidden'); } }); } });

 .buynow-tabs { display: flex; }

 <div class="buynow-tabs"> <div class="buynow-tabs__item-container"> <button class="buynow-tabs__tab">Basic</button> </div> <div class="buynow-tabs__item-container"> <button class="buynow-tabs__tab active">Premium</button> </div> <div class="buynow-tabs__item-container"> <button class="buynow-tabs__tab">Elite</button> </div> </div> <table> <thead> <tr> <th class="table-v4__plans-basic">Basic</th> <th class="table-v4__plans-premium">Premium</th> <th class="table-v4__plans-elite">Elite</th> </tr> </thead> <tbody> <tr> <td class="table-v4__plans-basic">Basic</td> <td class="table-v4__plans-premium">Premium</td> <td class="table-v4__plans-elite">Elite</td> </tr> <tr> <td class="table-v4__plans-basic">Basic</td> <td class="table-v4__plans-premium">Premium</td> <td class="table-v4__plans-elite">Elite</td> </tr> <tr> <td class="table-v4__plans-basic">Basic</td> <td class="table-v4__plans-premium">Premium</td> <td class="table-v4__plans-elite">Elite</td> </tr> <tr> <td class="table-v4__plans-basic">Basic</td> <td class="table-v4__plans-premium">Premium</td> <td class="table-v4__plans-elite">Elite</td> </tr> </tbody> </table>

Answer 1

您必須使用 for 循環遍歷表格單元格，並且必須在該循環內使用 if-else-blocks。 此外，沒有 class 的 CSS 定義.hidden並且您的 js 代碼中的選擇器錯誤（ table-v4__tab而不是table-v4__plans就像您的html中一樣）。

要在頁面加載后考慮您的硬編碼active為“Premium”活動，您可以觸發高級按鈕的點擊事件：

document.querySelectorAll('.buynow-tabs__tab')[1].click();

工作示例：

 document.addEventListener('DOMContentLoaded', function() { const tabsButtons = document.querySelectorAll('.buynow-tabs__tab'); const cells = document.querySelectorAll('[class^=table-v4__plans]'); const basicElements = document.querySelectorAll('.table-v4__plans-basic'); const premiumElements = document.querySelectorAll('.table-v4__plans-premium'); const eliteElements = document.querySelectorAll('.table-v4__plans-elite'); for (let i = 0; i < tabsButtons.length; i++) { tabsButtons[i].addEventListener('click', function() { const current = document.querySelector('.buynow-tabs__tab.active'); current.className = current.className.replace(' active', ''); this.className += ' active'; for (let i = 0; i < cells.length; i++) { cells[i].classList.add('hidden'); } for (let i = 0; i < basicElements.length; i++) { if (tabsButtons[0].classList.contains('active')) { basicElements[i].classList.remove('hidden'); } } for (let i = 0; i < premiumElements.length; i++) { if (tabsButtons[1].classList.contains('active')) { premiumElements[i].classList.remove('hidden'); } } for (let i = 0; i < eliteElements.length; i++) { if (tabsButtons[2].classList.contains('active')) { eliteElements[i].classList.remove('hidden'); } } }); } document.querySelectorAll('.buynow-tabs__tab')[1].click(); });

 .buynow-tabs { display: flex; }.hidden { display: none; }

 <div class="buynow-tabs"> <div class="buynow-tabs__item-container"> <button class="buynow-tabs__tab">Basic</button> </div> <div class="buynow-tabs__item-container"> <button class="buynow-tabs__tab active">Premium</button> </div> <div class="buynow-tabs__item-container"> <button class="buynow-tabs__tab">Elite</button> </div> </div> <table> <thead> <tr> <th class="table-v4__plans-basic">Basic</th> <th class="table-v4__plans-premium">Premium</th> <th class="table-v4__plans-elite">Elite</th> </tr> </thead> <tbody> <tr> <td class="table-v4__plans-basic">Basic</td> <td class="table-v4__plans-premium">Premium</td> <td class="table-v4__plans-elite">Elite</td> </tr> <tr> <td class="table-v4__plans-basic">Basic</td> <td class="table-v4__plans-premium">Premium</td> <td class="table-v4__plans-elite">Elite</td> </tr> <tr> <td class="table-v4__plans-basic">Basic</td> <td class="table-v4__plans-premium">Premium</td> <td class="table-v4__plans-elite">Elite</td> </tr> <tr> <td class="table-v4__plans-basic">Basic</td> <td class="table-v4__plans-premium">Premium</td> <td class="table-v4__plans-elite">Elite</td> </tr> </tbody> </table>

---

但是，如果您為每個按鈕（ basic 、 premium和elite ）添加一個 id，則有一種更簡單的方法。 您只需要為所有表格單元格（包括）定義一個 var。 th （由其 class 名稱[class^=table-v4__plans]的開頭選擇）。 在點擊處理程序中，您只需將按鈕 id ( e.target.id ) 與單元格的className進行比較，以確定是否必須添加或刪除 class .hidden （所有這些都在一個for循環中）。

因為我假設 class .active僅用於腳本，所以我在第二個示例中省略了它。 如果它對樣式等很重要，你當然可以像你一樣在點擊處理程序中處理它，或者使用這個壓縮版本：

document.querySelector('button.active').className = e.target.className;
e.target.className = 'active';

工作示例：

 document.addEventListener('DOMContentLoaded', function() { const cells = document.querySelectorAll('[class^=table-v4__plans]'); document.querySelector('.buynow-tabs').addEventListener('click', function(e) { for (i = 0; i < cells.length; i++) { if (cells[i].className.includes(e.target.id)) { cells[i].classList.remove('hidden'); } else { cells[i].classList.add('hidden'); } } }); document.querySelectorAll('.buynow-tabs__tab')[1].click(); });

 .buynow-tabs { display: flex; }.hidden { display: none; }

 <div class="buynow-tabs"> <div class="buynow-tabs__item-container"> <button id="basic" class="buynow-tabs__tab">Basic</button> </div> <div class="buynow-tabs__item-container"> <button id="premium" class="buynow-tabs__tab">Premium</button> </div> <div class="buynow-tabs__item-container"> <button id="elite" class="buynow-tabs__tab">Elite</button> </div> </div> <table> <thead> <tr> <th class="table-v4__plans-basic">Basic</th> <th class="table-v4__plans-premium">Premium</th> <th class="table-v4__plans-elite">Elite</th> </tr> </thead> <tbody> <tr> <td class="table-v4__plans-basic">Basic</td> <td class="table-v4__plans-premium">Premium</td> <td class="table-v4__plans-elite">Elite</td> </tr> <tr> <td class="table-v4__plans-basic">Basic</td> <td class="table-v4__plans-premium">Premium</td> <td class="table-v4__plans-elite">Elite</td> </tr> <tr> <td class="table-v4__plans-basic">Basic</td> <td class="table-v4__plans-premium">Premium</td> <td class="table-v4__plans-elite">Elite</td> </tr> <tr> <td class="table-v4__plans-basic">Basic</td> <td class="table-v4__plans-premium">Premium</td> <td class="table-v4__plans-elite">Elite</td> </tr> </tbody> </table>

Answer 2

就像其他人指出的那樣，您的代碼不起作用的原因是您必須遍歷選擇器查詢的所有元素。 但我認為有一種更優雅的方法可以解決您的問題：

建議

我建議您在單擊按鈕時只更改樣式表，而不是更改所有元素的類。 它將大大簡化您的代碼並完全消除許多錯誤。

解釋

以下是如何執行此操作的示例：

首先將可編寫腳本的樣式表添加到文檔的開頭：

const selectedTabStyles = document.createElement('style')
document.head.appendChild(selectedTabStyles)

然后創建一個 function 來更改樣式表

function onlyShowSelectedPlan(plan) {
  selectedTabStyles.innerHTML = `
    th, td {display: none}
    .table-v4__plans-${plan} {display: table-cell}
  ` 
}

這就是腳本部分！ 現在您可以將您的“計划選擇”function 作為 onclick 處理程序添加到您的按鈕

<button onclick="onlyShowSelectedPlan('basic')">Basic</button>

演示

 const selectedTabStyles = document.createElement('style') document.head.appendChild(selectedTabStyles) function onlyShowSelectedPlan(plan) { selectedTabStyles.innerHTML = `th, td {display: none}.table-v4__plans-${plan} {display: table-cell}` }

 .buynow-tabs { display: flex; }

 <div class="buynow-tabs"> <div class="buynow-tabs__item-container"> <button class="buynow-tabs__tab" onclick="onlyShowSelectedPlan('basic')">Basic</button> </div> <div class="buynow-tabs__item-container"> <button class="buynow-tabs__tab" onclick="onlyShowSelectedPlan('premium')">Premium</button> </div> <div class="buynow-tabs__item-container"> <button class="buynow-tabs__tab" onclick="onlyShowSelectedPlan('elite')">Elite</button> </div> </div> <table> <thead> <tr> <th class="table-v4__plans-basic">Basic</th> <th class="table-v4__plans-premium">Premium</th> <th class="table-v4__plans-elite">Elite</th> </tr> </thead> <tbody> <tr> <td class="table-v4__plans-basic">Basic</td> <td class="table-v4__plans-premium">Premium</td> <td class="table-v4__plans-elite">Elite</td> </tr> <tr> <td class="table-v4__plans-basic">Basic</td> <td class="table-v4__plans-premium">Premium</td> <td class="table-v4__plans-elite">Elite</td> </tr> <tr> <td class="table-v4__plans-basic">Basic</td> <td class="table-v4__plans-premium">Premium</td> <td class="table-v4__plans-elite">Elite</td> </tr> <tr> <td class="table-v4__plans-basic">Basic</td> <td class="table-v4__plans-premium">Premium</td> <td class="table-v4__plans-elite">Elite</td> </tr> </tbody> </table>