Javascript - 隐藏/显示 - 多个按钮 - 调用 1 个函数 [重复]答案

【问题标题】：Javascript - hide/show - multiple buttons - calling 1 function [duplicate]Javascript - 隐藏/显示 - 多个按钮 - 调用 1 个函数 [重复]
【发布时间】：2021-05-07 03:18:54
【问题描述】：

请问有人能解释一下这种情况吗？

我想对更多按钮使用相同的功能（隐藏/显示）。如何用不同的按钮调用相同的函数？

我找到了如何使用一个按钮，但找不到 2 个或更多按钮的任何解决方案。

如果我点击 bt1，我想隐藏 div1，如果我点击 bt2，我想隐藏 div2。感谢您的帮助...

我当前的代码是：

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

<html>

<body>
  <button id="bt1" onclick="myFunction()">Button 1</button>
  <div id="div1">div1</div>
  <p></p>
  <button id="bt2" onclick="myFunction()">Button 2</button>
  <div id="div2">div2</div>
</body>

</html>

感谢您的帮助...

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以将 div 的 ID 作为参数传递给您的函数：

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

<button id="bt1" onclick="myFunction('div1')">Button 1</button>
<div id="div1">div1</div>
<p></p>
<button id="bt2" onclick="myFunction('div2')">Button 2</button>
<div id="div2">div2</div>

【讨论】：

【解决方案2】：

一种方法是将 DIV 的 ID 作为函数参数传递。

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

<html>

<body>
  <button id="bt1" onclick="myFunction('div1')">Button 1</button>
  <div id="div1">div1</div>
  <p></p>
  <button id="bt2" onclick="myFunction('div2')">Button 2</button>
  <div id="div2">div2</div>
</body>

</html>

另一种方法是传递按钮本身，并使用 DOM 导航，如果要隐藏和显示的 DIV 总是在按钮之后。

function myFunction(button) {
  var x = button.nextElementSibling;
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<html>

<body>
  <button id="bt1" onclick="myFunction(this)">Button 1</button>
  <div id="div1">div1</div>
  <p></p>
  <button id="bt2" onclick="myFunction(this)">Button 2</button>
  <div id="div2">div2</div>
</body>

</html>

【讨论】：

【解决方案3】：

我会这样做：

添加一个数据属性，如data-js-hide="div1"
为所有具有data-js-hide 属性的元素添加点击事件监听器
点击时使用属性"div1"中的值data-js-hide

优点是元素在 DOM 中的位置无关紧要。你只需要设置带有id的属性，然后点击带有id的item就会被隐藏或显示出来。

function myFunction(event) {
  var x = document.getElementById(event.target.dataset.jsHide);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

var buttons = document.querySelectorAll('[data-js-hide]');
buttons.forEach( 
    button => { 
        button.addEventListener('click', myFunction);
    }
);

<html>

<body>
  <button data-js-hide="div1" >Button 1</button>
  <div id="div1">div1</div>
  <p></p>
  <button data-js-hide="div2">Button 2</button>
  <div id="div2">div2</div>
  <p></p>
  <button data-js-hide="div3">Button 3</button>
  <div id="div3">div3</div>
</body>

</html>

【讨论】：