Javascript 如何使用类切换函数在单击时更改和取消更改CSS按钮样式？

我正在尝试编写一个代码来切换按钮的样式。起初，我认为我可以用CSS和活动选择器来实现这一点。但我也希望能够撤消单击时所做的更改，而活动选择器不会这样做。然后我想我可以用JavaScript和类切换函数来实现这一点

不幸的是，我对JavaScript不太熟悉。我写了一段代码，它部分工作，但它总是改变同一元素的样式（可能是因为它是具有特定类的第一个元素？）

有没有一种方法可以构建一个灵活的函数，它可以应用于多个元素，具体取决于我单击哪个元素

函数testtoggle（）{
if（document.getElementById（“testknop”）.className==“NIETACIEF”）{
document.getElementById（“testknop”）.className=“actief”；
}否则{
document.getElementById（“testknop”）.className=“NIETACIEF”；
}
}

按钮{
光标：指针；
填充：16px；
字体大小：16px；
边界半径：100%；
}
尼塔切夫先生{
背景色：#a8a8a8；
边框：5px实心#ddd；
}	
.actief{
背景颜色：紫色；
边框：5px纯绿色；
}

1e
2e
3e

您应该查看JavaScript中的功能。它使得在元素上添加、删除和切换类变得容易

//获取组中所有按钮的列表
let buttons=Array.from（document.querySelectorAll（'[type=button]'））
//为每个按钮添加一个单击事件侦听器
//这允许我们从html中删除“onclick”
按钮。forEach（项目=>{
item.addEventListener（'click'，e=>{
//单击按钮后，删除活动状态
//然后添加非活动状态
按钮。forEach（按钮=>{
//如果当前按钮不等于单击的按钮
//删除活动状态类
button！=e.currentTarget&&button.classList.remove（“actief”）
button.classList.add（“NIETACIEF”）
})
//切换已单击按钮的状态
item.classList.toggle（“actief”）
})
})

按钮{
光标：指针；
填充：16px；
字体大小：16px；
边界半径：100%；
}
尼塔切夫先生{
背景色：#a8a8a8；
边框：5px实心#ddd；
}
.actief{
背景颜色：紫色；
边框：5px纯绿色；
}

1e
2e
3e

您观察到的是用户的预期行为

您可以传递对触发事件的按钮的引用：

window.testtoggle=函数（elmnt）{
if（elmnt.className==“nietracef”）{
elmnt.className=“actief”；
}否则{
elmnt.className=“nietracef”；
}
}

按钮{
光标：指针；
填充：16px；
字体大小：16px；
边界半径：100%；
}
尼塔切夫先生{
背景色：#a8a8a8；
边框：5px实心#ddd；
}	
.actief{
背景颜色：紫色；
边框：5px纯绿色；
}

1e
2e
3e

您考虑过使用Jquery吗？嗨，Adam，实际上我没有，因为我对jQuery不太熟悉。这样做的好处是什么？一般来说，Jquery的目标是使许多任务比其原始Javascript实现更容易。Jquery通常会减少代码行数，一旦习惯了语法，就很容易理解。我个人更喜欢它的语法来选择元素

$（'id\u name'）

vs

document.getElementById（'id\u name'）

。我不确定我是否参与过一个不使用jquery的javascript项目——它很方便，我认为学习很好。我会这样做。谢谢你的建议！嗨，谢谢你的帮助！但是，我无法通过再次单击按钮撤消更改。我做错什么了吗？