如何为不同的按钮重用JavaScript函数？

我想使用一个javascript函数，它可以隐藏或显示不同的div（none/block）。但是，对于每单击一个不同的按钮，都应该显示或隐藏一个不同的div

我的职能如下：

function visibility() {
    var x = document.getElementById("searchfield");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

按钮是：

<div><button id="subclass_button" onclick="visibility()">Age</button>
      <div><button id="subclass_button" onclick="visibility()">Death Place</button>
      <div><button id="subclass_button" onclick="visibility()">Death Cause</button>
      <div><button id="subclass_button" onclick="visibility()">Music Genre</button>
      <div><button id="subclass_button" onclick="visibility()">Gender</button>
      <div><button id="subclass_button" onclick="visibility()">Birthplace</button>

年龄
死亡之地
死因
音乐流派
性别
出生地

我要显示/隐藏的div如下所示，必须链接到一个按钮：

<div id="gender">
        <button>Male</button>
        <button>Female</button>
      </div>

      <div id="deathPlace">
        <input type="text" class="form-control" placeholder="Search for a death place..." >
        <button ng-click="doMyAction()" type="button">Search</button>
      </div>

      <div id="birthplace">
        <input type="text" class="form-control" placeholder="Search for a birthplace..." >
        <button ng-click="doMyAction()" type="button">Search</button>
      </div>

男性
女性
搜寻
搜寻

因此，如果我按下性别按钮，我只希望显示id=“gender”的div。

---

我希望有人能帮忙！提前感谢。

只需向您的函数发送目标div的id即可

<div><button id="subclass_button" onclick="visibility('gender')">Gender</button>

function visibility(divId) {
  var x = document.getElementById(divId);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

---

Java不是JavaScript的缩写。在函数中传递您的div id，比如

onclick=“visibility（'divid'）”

那么您需要添加逻辑来知道应该切换什么。传入一个id，使用该id进行切换。@epascarello什么错误？在Visibility函数

中，这将是您试图与之交互的元素