Javascript - 隐藏/显示 - 多个按钮 - 调用 1 个函数

如何解决Javascript - 隐藏/显示 - 多个按钮 - 调用 1 个函数

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

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

我找到了如何用一个按钮来完成，但找不到任何解决方案来处理 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>

感谢您的帮助...

解决方法

您可以将 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>

一种方法是将 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>

我会这样做：

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

优点是元素在 DOM 中的位置无关紧要。您只需要设置带有 id 的属性，然后点击带有 id 的项目就会相应地隐藏或显示。

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>

Javascript - 隐藏/显示 - 多个按钮 - 调用 1 个函数

如何解决Javascript - 隐藏/显示 - 多个按钮 - 调用 1 个函数

解决方法

相关推荐