Javascript 在多个元素上切换类列表

我有功能代码，但我相信有一种方法可以编写得更干净

我认为我的代码远远不是最佳实践。不要重复自己的原则

我试图寻找这个问题，但找不到答案

以下是预期结果和我的当前代码：

---

我还想知道，是否有办法使我不必在每个元素上使用特定的id和类名？我可以只使用类“more wrapper”并跳过ID吗？

这里有一个可重用的按钮点击处理程序示例

要使其发挥作用，您必须：

• 使用类将所有按钮/内容组包装在包装器div中
• 更改CSS，使其在wrappers类上工作
• 将click事件处理程序添加到类的每个元素中
• 使用事件获取最近的包装器
• 现在你可以改变它的类别了

//查询“.wrapper”元素中的所有“a”元素
document.querySelectorAll（“.wrapper>a”）.forEach（b=>{
//将单击处理程序添加到每个
b、 onclick=（e）=>{
//防止“a”元素的默认操作
e、 预防默认值（）；
//从事件中获取最接近的包装
让按钮=e.目标；
让wrapper=button.closest（“.wrapper”）；
//现在换个班
wrapper.classList.toggle（“show”）；
};
});
.wrapper>div{
可见性：隐藏；
}
.wrapper.show>div{
可见性：可见
};

测试1
测试2
测试3
测试4

document.querySelectorAll（“.more按钮”）.forEach（元素=>{
element.onclick=（e）=>{
const elm=document.getElementsByClassName（e.target.getAttribute（“锚”）；
elm[0].classList.toggle（“显示”）；
};
});
。更多信息{
可见性：隐藏；
}
.more-wrapper.show{可见性：可见}

测试1
测试2
测试3
测试4
您可以将
函数（）{morebtnotalt（）}
替换为
morebtnotalt
。通常，您可以编写一个函数，其中每个单击的元素决定另一个元素。最简单的方法是给他们一个共同的父母。让我来编辑你的小提琴。这里有一个活生生的例子：谢谢！这是一个很好的解决方案，但是它迫使我改变我的html结构。代码有多个相同的ids，并且对最后三个链接无效。@ChrisG我的错误，修复了它！如果你不想要这个解决方案，你应该改变你的HTML结构。
document.getElementById("BtnMoreTotalt").onclick = function() {MoreBtnTotalt()};
function MoreBtnTotalt() {
    document.querySelector(".more-wrapper-totalt").classList.toggle("show");
}