Javascript 如何将多个事件侦听器和查询选择器组合到一个函数中？

如何将此事件侦听器重写为一个我不会重复的函数或循环。谢谢

const button1 = document.querySelector("#no-1");const content1 = document.querySelector("#open-1");

const button2 = document.querySelector("#no-2");const content2 = document.querySelector("#open-2");

const button3 = document.querySelector("#no-3");const content3 = document.querySelector("#open-3");

const button4 = document.querySelector("#no-4");const content4 = document.querySelector("#open-4");

button1.onclick = function() {content1.style.display ="block";}

button2.onclick = function() {content2.style.display ="block";}

button3.onclick = function() {content3.style.display ="block";}

button4.onclick = function() {content4.style.display ="block";}

---

为什么不就这样

    for (let i=1; i<=4; i++) {
      const button = document.querySelector(`#no-${i}`);
      const content = document.querySelector(`#open-${i}`);
      button.onclick = function() {
        content.style.display ="block";
      }
    }

对于（让i=1；i在将来，包含HTML是很有用的，并且有一个以代码片段形式提供的示例供我们使用

我刚刚制作了一个片段，其中您的“content”div正在包装按钮。Arthur的回答很好，将非常有效。另一种方法（我在这里展示）是获取按钮的id名称（您可以通过将事件传递给函数，然后使用
e.target
访问元素来访问它），提取连字符后的数字，然后提取内容div

我在这里偷了随机颜色发生器：


更改div背景以便可以看到单击按钮会影响右侧div


功能按钮点击（e）{
const targetNum=e.target.id.split（“-”[1]；
document.querySelector（'#open-'+targetNum）.style.backgroundColor=getRandomColor（）；
}
函数getRandomColor（）{
变量字母='0123456789ABCDEF'；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}

按钮1
按钮2
按钮3
按钮4
你能发布你的HTML吗？我是新来的，所以我需要找到自己的方法，下次我会添加HTML或制作代码片段，谢谢你的回复
for (let i=1; i<=4; i++) {
  document.querySelector(`#no-${i}`).onclick = function() {
    document.querySelector(`#open-${i}`).style.display ="block";
  }
}