根据多个元素的ID将eventlistener应用于它们

Question

我用它们的ID定义了两个按钮：但切换，但关闭以显示隐藏面板：

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

现在我有一个JS函数，它切换分配给的面板(显示/隐藏(，但切换如下：

(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

您可以使用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);

Answer 2

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

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