如何为页面多个ID相似的div元素添加点击触发Modal弹窗的事件监听

嘿，我来帮你搞定这个问题！你已经有了能正常触发modal的基础逻辑，现在只需要把它扩展到所有目标div上就行。这里有两种简单可靠的实现方式：

方法1：利用共享类名（推荐） #

既然所有需要触发弹窗的div都带有board_order类，直接通过类选择器批量获取元素是最简洁且易维护的方案——后续新增div只要加上这个类，就能自动拥有触发弹窗的功能：

// 先确保你已经获取到modal元素
const modal = document.getElementById('你的modal元素ID');
// 获取所有带board_order类的触发元素
const triggerDivs = document.querySelectorAll('.board_order');

// 循环给每个元素绑定点击事件
triggerDivs.forEach(div => {
  div.addEventListener('click', displayModal);
});

function displayModal() {
  modal.style.display = 'block';
}

方法2：按ID前缀筛选元素 #

如果你更倾向于基于myCheck开头的ID来选择元素，可以使用属性前缀选择器[id^="myCheck"]来匹配所有符合命名规则的div：

const modal = document.getElementById('你的modal元素ID');
const triggerDivs = document.querySelectorAll('[id^="myCheck"]');

triggerDivs.forEach(div => {
  div.addEventListener('click', displayModal);
});

function displayModal() {
  modal.style.display = 'block';
}

小提醒 #

• 记得把代码里的你的modal元素ID替换成你实际的modal容器ID哦，不然modal变量会找不到对应的DOM元素。
• 建议用const/let替代var，这是现代JavaScript的最佳实践，能避免很多变量作用域的问题。

内容的提问来源于stack exchange，提问作者Jeanclaude