如何通过单个JavaScript函数实现多按钮对应不同DIV的显示切换？

不用复制多个函数，以下几种方案能让单个函数实现所有按钮的切换逻辑：

方案1：给函数传递目标ID参数 #

直接在按钮的onclick事件里传入对应div的ID，单个函数即可处理所有切换：

function toggleDiv(targetId) {
  const target = document.getElementById(targetId);
  target.style.display = target.style.display === "none" ? "block" : "none";
}

<button onclick="toggleDiv('myDIV1')">切换文本1</button>
<div id="myDIV1">这是第1个DIV元素</div>

<button onclick="toggleDiv('myDIV2')">切换文本2</button>
<div id="myDIV2">这是第2个DIV元素</div>

<button onclick="toggleDiv('myDIV3')">切换文本3</button>
<div id="myDIV3">这是第3个DIV元素</div>

方案2：利用自定义属性data-target #

给按钮添加data-target属性指定目标div的ID，函数通过该属性获取元素，代码更语义化：

function toggleDiv() {
  const btn = event.target;
  const target = document.getElementById(btn.dataset.target);
  target.style.display = target.style.display === "none" ? "block" : "none";
}

<button onclick="toggleDiv()" data-target="myDIV1">切换文本1</button>
<div id="myDIV1">这是第1个DIV元素</div>

<button onclick="toggleDiv()" data-target="myDIV2">切换文本2</button>
<div id="myDIV2">这是第2个DIV元素</div>

方案3：利用DOM相邻关系（按钮与div紧挨着时适用） #

如果按钮和对应div是直接相邻的兄弟元素，无需写ID，直接通过nextElementSibling获取目标：

function toggleDiv() {
  const target = event.target.nextElementSibling;
  target.style.display = target.style.display === "none" ? "block" : "none";
}

<button onclick="toggleDiv()">切换文本1</button>
<div>这是第1个DIV元素</div>

<button onclick="toggleDiv()">切换文本2</button>
<div>这是第2个DIV元素</div>

额外优化：用CSS类控制显示隐藏 #

相比直接操作行内样式，用CSS类控制更易维护，比如定义一个隐藏类：

.hidden {
  display: none;
}

函数改为切换类名：

function toggleDiv(targetId) {
  const target = document.getElementById(targetId);
  target.classList.toggle("hidden");
}

后续要调整隐藏效果（比如改成渐变隐藏），只需修改CSS即可，无需改动JS逻辑。

内容的提问来源于stack exchange，提问作者cgss