根据多个元素的 ID 将 eventlistener 应用于多个元素-解网

问：

我定义了两个带有其ID的按钮：but-toggle，but-close用于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 的面板（显示/隐藏），如下所示：

(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

谢谢

JavaScript addEventListener getElementByID ID

评论

0赞 mehdim2 3/15/2021

你关闭什么？

0赞 Stalkium 3/15/2021

我隐藏了面板，它就像一个带有信息和关闭按钮的面板，它将从显示切换到隐藏

答：

2赞 Ravi Teja Muddada 3/15/2021 #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

评论

2赞 Pablo Lozano 3/15/2021

您还可以使用document.querySelectorAll("#ID1, #ID2")

0赞 Stalkium 3/15/2021

是的，但就我而言，我还有许多其他按钮，我不想分配这些按钮？

0赞 Stalkium 3/15/2021

你能@PabloLozano发布一个例子作为答案吗？如果这有效，我会接受的，谢谢

2赞 Pablo Lozano 3/15/2021 #2

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

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);

评论

0赞 Stalkium 3/15/2021

对不起，你们俩都用querySelector（“#Id1， #Id2”）发布了正确答案......我只能用FIFO算法在你们之间做出决定，pablo先发，谢谢你们俩

上一个：基于元素宽度的 CSS 媒体查询

下一个：使用命令行从应用程序在浏览器中打开GMail帐户