Javascript 在单击按钮时将类添加到项目集合并将其删除（vanilla JS）

我有3个选项卡，我用它们在移动版本中切换表列。我试图实现的是，单击合适的列按钮隐藏/显示表列。我的想法是操作每个列items类，这对于该列中的所有元素都是一样的，但我遇到了问题，无法将.hidden类添加到项集合中。如果您能就此提供任何建议，我将不胜感激。或者有更好的方法来操作标签

document.addEventListener（'DOMContentLoaded'，function（）{
让tabsContainer=document.querySelector（'.buynow tabs'）；
让tabsButtons=tabsContainer.querySelectorAll（'.buynow-tabs__-tab'）；
让basicElements=document.querySelectorAll（'.table-v4__-tab-basic'）；
让premiumElements=document.querySelectorAll（'.table-v4_utab-premium'）；
让eliteElements=document.querySelectorAll（'.table-v4_utab-elite'）；
对于（变量i=0；i
.buynow选项卡{
显示器：flex；
}

基本的
保险费
精英
基本的
保险费
精英
基本的
保险费
精英
基本的
保险费
精英
基本的
保险费
精英
基本的
保险费
精英
正如其他人指出的那样，代码不起作用的原因是您必须迭代选择器查询的所有元素。但我认为有一种更优雅的方式来解决你的问题：

暗示
我建议您在单击按钮时只更改样式表，而不是更改所有元素的类。
它将大大简化您的代码，并完全删除许多bug

解释
下面是一个如何做到这一点的示例：

首先将可编写脚本的样式表添加到文档的开头：

const selectedTasthyles=document.createElement（'style'））
document.head.appendChild（选择的标题样式）

然后创建一个函数来更改样式表

功能仅显示所选计划（计划）{
SelectedTastyles.innerHTML=`
th，td{显示：无}
.table-v4__计划-${plan}{display:表格单元格}
` 
}

这就是脚本部分！现在，您可以将“计划选择”函数作为onclick处理程序添加到按钮中

Basic

演示

const selectedTasthyles=document.createElement（'style'））
document.head.appendChild（选择的标题样式）
功能仅显示所选计划（计划）{
selectedTastyles.innerHTML=`th，td{display:none}.table-v4__计划-${plan}{display:table cell}`
}
.buynow选项卡{
显示器：flex；
}

基本的
保险费
精英
基本的
保险费
精英
基本的
保险费
精英
基本的
保险费
精英
基本的
保险费
精英
基本的
保险费
精英
您必须使用for循环遍历表单元格，并且必须使用该循环中的if-else块。此外，类
.hidden
没有CSS定义，js代码中的选择器错误（
table-v4\u选项卡
，而不是html中的
table-v4\u计划
）

要在页面加载后让“Premium”的硬编码类
处于活动状态
，您可以通过以下方式触发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_uuplans]”）；
const basicElements=document.querySelectorAll（'.table-v4__-plans-basic'）；
const premiumElements=document.querySelectorAll（'.table-v4__-plans-premium'）；
const-eliteElements=document.querySelectorAll（'.table-v4__-elite'）；
for（设i=0；i