根据元素的 ID 将事件监听器应用于多个元素

Question

我有两个用它们的 ID 定义的按钮：but-toggle，but-close for show hide a panel：

<button id="but-toggle">Panel</button>
<div id="main-panel" style="display:none">
   <button id="but-close">X</button>
   <!-- some panel data -->
</div>

现在我有一个 JS 函数可以切换分配给 but-toggle 的面板 (show/hide)，如下所示：

(function(){document.getElementById("but-toggle").addEventListener("click",function(){
var pan = document.getElementById("main-panel");
if(pan.style.display==="inline-block")
{pan.style.display="none"}
else
{pan.style.display="inline-block"}
});})();

我的问题是如何在不编写两个函数的情况下对两个按钮使用相同的函数，每个函数一个。我想要一个基于元素 ID 的元素解决方案，因为类是不同的并且不能为此

使用 getElementByClass

谢谢

Answer 1

您可以使用下面的方法获取所有按钮

 var btns=document.getElementsByTagName('button');
     
 for (let i = 0; i < btns.length; i++) {
   btns[i].addEventListener("click", function() {
     //code
   });
 }

（或）

如果您使用类型为按钮的输入标签

 document.querySelectorAll("input[type=button]");

（或）基于多个 ID

document.querySelectorAll('#id1, #id2, #id3');

然后你可以添加eventListener

Answer 2

您可以使用 document.querySelector 从 ID 列表中获取元素列表：

function toggleFn() {
  const pan = document.getElementById("main-panel");
  if(pan.style.display === "inline-block") {
    pan.style.display = "none";
  } else {
    pan.style.display = "inline-block";
  }
}
document.querySelector("#Id1, #Id2")
  .forEach(elem => elem.addEventListener(toggleFn);

根据元素的 ID 将事件监听器应用于多个元素

Apply eventlistener to multiple elements based on their IDs

javascript

getelementbyid

addeventlistener

ids