如何用var获取多个ID元素？单ID代码需扩展为多实例

嘿，这里有几个实用的方案帮你批量获取这些带数字后缀的元素，不用重复写一堆getElementById啦：

方案1：循环批量收集到数组（适合已知数量的场景） #

如果已经确定有多少组模态框，直接用循环遍历数字后缀，把对应的元素存到数组里，后续使用起来很方便：

// 先设定你要处理的模态框总数，比如这里是3组
const totalModalGroups = 3;

// 定义数组存储各类元素
const modals = [];
const modalBtns = [];
const closeBtns = [];

// 循环遍历1到totalModalGroups，收集每个元素
for (let i = 1; i <= totalModalGroups; i++) {
  modals.push(document.getElementById(`modal${i}`));
  modalBtns.push(document.getElementById(`Info${i}`));
  closeBtns.push(document.getElementById(`closeBtn${i}`));
}

使用的时候，modals[0]对应modal1，modalBtns[1]对应Info2，以此类推（数组索引从0开始，比数字后缀小1）。

方案2：用属性选择器匹配ID前缀（适合数量不确定的场景） #

如果不确定有多少组元素，或者想更灵活，可以用document.querySelectorAll结合属性前缀选择器，自动匹配所有符合ID模式的元素：

// 获取所有ID以"modal"开头的元素
const modals = Array.from(document.querySelectorAll('[id^="modal"]'));
// 获取所有ID以"Info"开头的按钮
const modalBtns = Array.from(document.querySelectorAll('[id^="Info"]'));
// 获取所有ID以"closeBtn"开头的关闭按钮
const closeBtns = Array.from(document.querySelectorAll('[id^="closeBtn"]'));

⚠️ 注意：这种方式会按照元素在DOM中的出现顺序收集，要确保modal1在modal2前面，Info1在Info2前面，这样数组里的索引才能一一对应。

方案3：用类名替代ID后缀（最易维护的方案） #

其实更推荐给这些元素统一添加类名，摆脱对ID数字后缀的依赖，后续新增或修改元素都不用改JS代码：

示例HTML结构 #

<!-- 给模态框加统一类名"modal" -->
<div id="modal1" class="modal">...</div>
<!-- 给打开按钮加统一类名"modal-trigger-btn" -->
<button id="Info1" class="modal-trigger-btn">打开模态框1</button>
<!-- 给关闭按钮加统一类名"modal-close-btn" -->
<button id="closeBtn1" class="modal-close-btn">关闭</button>

<div id="modal2" class="modal">...</div>
<button id="Info2" class="modal-trigger-btn">打开模态框2</button>
<button id="closeBtn2" class="modal-close-btn">关闭</button>

对应的JS代码 #

const modals = document.querySelectorAll('.modal');
const modalBtns = document.querySelectorAll('.modal-trigger-btn');
const closeBtns = document.querySelectorAll('.modal-close-btn');

额外：给批量元素绑定事件示例 #

不管用哪种方案，都可以用forEach循环给每组元素绑定事件，比如打开/关闭模态框：

// 绑定打开模态框事件
modalBtns.forEach((btn, index) => {
  btn.addEventListener('click', () => {
    modals[index].style.display = 'block';
  });
});

// 绑定关闭模态框事件
closeBtns.forEach((btn, index) => {
  btn.addEventListener('click', () => {
    modals[index].style.display = 'none';
  });
});

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