单击添加/删除类并一次添加/删除一组 DIV 的值

Question

我正在使用 Generate Press 和 Super 表单在 wordpress 网站上工作。该网站是https://ibsolutions.biz/piesarul。 超级表单在称为配置器的页面中用于创建自定义的报价请求表单。 我让它工作到用户可以切换按钮并根据按钮是否打开/关闭显示复选框的程度。 但是，我想这样做，所以当一个切换按钮打开时，其他按钮就关闭了。我用这段代码试试运气：

$(".super-toggle-switch").click(function(event){
$(this).addClass("super-active")
.siblings()
.removeClass("super-active");
});

没有成功。关于如何改进它的任何建议？ 当前发生的情况是，当切换开关打开时，具有 super-toggle-switch 类的 div 也被分配了“超级活动”类。 此外，当按钮打开时，名为 super-shortcode-field 的从属 div 被分配值“on”，而当关闭时，它被分配值“off”。

基本上，我希望实现的是一次只为一个切换按钮触发超级简码字段的值和类分配。

现在，用户必须手动打开和关闭按钮，我想为他们省去这个额外的步骤。

在我的 JS 和 JQuery 旅程的开始，我将不胜感激任何和所有的帮助:)

Answer 1

我不了解 jQuery，7 年前就停止使用它了。在纯 Javascript 中，这很容易：

const switches = document.querySelectorAll('.super-toggle-switch');
for (const switch of switches) {
    switch.addEventListener('click', toggleSwitches)
}

function toggleSwitches(event) {
    for (const switch of switches) {
        switch.classList.toggle('super-active', switch === event.target);
    }
}