Javascript 条件，如果多个元素具有一个类

我有这个HTML：

<div>
    <button type="button" id="a"></button>
</div>
<div>
    <button type="button" id="b"></button>
</div>
<div>
    <button type="button" id="c"></button>
</div>

<div class="hidden" id="a1">
    <p>text1</p>
</div>
<div class="hidden" id="b1">
    <p>text2</p>
</div>
<div class="hidden" id="c1">
    <p>text3</p>
</div>

<div class="hidden" id ="content">
    <p>text4</p>
</div>

我想如果我按“a”显示“a1”和“内容”，b显示“b1”和“内容”

但我想，当我按下一个按钮，所有按钮都被隐藏时，“内容”也被隐藏，我知道一种方法是添加每个“点击”的代码

坚果我需要另一种方法来制作它，因为我必须每x天添加一个按钮。。。可能正在添加包含所有按钮的数组

   const d1 = [a1, b1, c1]

---

并在每次“单击”中添加一个for，但我不知道如何操作。

您的问题并不完全清楚。你是说像这样的事吗

[…document.queryselectoral（“按钮”）].forEach（函数（按钮）{
按钮。addEventListener（“单击”，函数（evt）{
var元素=document.getElementById（event.target.id+“1”）
if（element.style.display==“块”）{
element.style.display=“无”；
}否则{
element.style.display=“块”；
document.getElementById（“内容”）.style.display=“块”；
}
if（document.getElementById（“a1”）.style.display==“无”和document.getElementById（“b1”）.style.display==“无”和document.getElementById（“c1”）.style.display==“无”）{
document.getElementById（“内容”）.style.display=“无”
}
})
})

A.
B
C
文本1

文本2

文本3

文本4

你显示的是

#a

元素本身，而不是

#a1

oneyes@Bergi，我很笨，我编辑了这篇文章。很抱歉

const a = document.getElementById("a")
const b = document.getElementById("b")
const c = document.getElementById("c")

const a1 = document.getElementById("a1")
const b1 = document.getElementById("b1")
const c1 = document.getElementById("c1")

const content = document.getElementById("content")

a.addEventListener('click', function (event) {
if (content.className === "hidden") {
    content.className += " shows";
}
if (a1.className === "hidden") {
    a1.className += " shows";
    } else {
    a1.className = "hidden";
}

b.addEventListener('click', function (event) {
if (content.className === "hidden") {
    content.className += " shows";
}
if (b1.className === "hidden") {
    b1.className += " shows";
    } else {
    b1.className = "hidden";
}

c.addEventListener('click', function (event) {
if (content.className === "hidden") {
    content.className += " shows";
}
if (c1.className === "hidden") {
    c1.className += " shows";
    } else {
    c1.className = "hidden";
}

if (a1.className === "hidden" && b1.className === "hidden" && c1.className === "hidden") {
        content.classList.remove("shows");
    }

   const d1 = [a1, b1, c1]