如何解决根据 ID 将事件侦听器应用于多个元素
我用它们的 ID 定义了两个按钮:but-toggle,but-close 用于显示隐藏面板:
<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
谢谢
解决方法
您可以使用下面的按钮获取所有按钮
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');
然后你可以添加事件监听器
,您可以使用 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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。