使用JS更高效实现模态框开闭、精简冗余代码的方法咨询

关闭按钮仅第一个生效的原因 #

你之前给.close类绑定时应该用了document.querySelector('.close')，这个API仅会返回匹配到的第一个符合条件的元素，所以你只给第一个关闭按钮绑定了点击事件，其余关闭按钮没有绑定触发逻辑，自然只有第一个打开的模态框能正常关闭。如果要选中所有匹配元素，需要用document.querySelectorAll('.close')遍历绑定。

精简代码方案 #

方案1：基于现有ID规则循环绑定（无需修改现有HTML）

你的ID命名有明确的对应规则，直接把模态框标识提取成数组循环绑定即可，后续新增模态框只需要给数组加对应配置项就行，不用重复写绑定逻辑：

// 统一维护所有模态框的配置，新增模态框只需加这一处配置
const modalConfigs = [
  { openBtnId: 'imageEdit-button', modalId: 'pic-modal' },
  { openBtnId: 'curpEdit-button', modalId: 'curp-modal' },
  { openBtnId: 'phoneEdit-button', modalId: 'phone-modal' },
  { openBtnId: 'addressEdit-button', modalId: 'address-modal' }
]

modalConfigs.forEach(config => {
  // 绑定开启事件
  document.getElementById(config.openBtnId).addEventListener('click', () => {
    document.getElementById(config.modalId).style.display = 'flex'
  })
  // 绑定关闭事件
  const closeBtnId = `close-${config.modalId.replace('-modal', 'Modal')}`
  document.getElementById(closeBtnId).addEventListener('click', () => {
    document.getElementById(config.modalId).style.display = 'none'
  })
})

方案2：自定义属性+事件委托（更易维护，后续加模态框无需改JS）

如果可以稍微调整HTML，给开启按钮加data-open-modal属性、值为对应模态框ID，给关闭按钮加data-close-modal属性、值为对应模态框ID，JS逻辑可以写得更通用，后续新增模态框不用动JS代码：

HTML修改示例

<!-- 开启按钮示例 -->
<button data-open-modal="pic-modal" id="imageEdit-button">修改头像</button>
<!-- 关闭按钮示例 -->
<button data-close-modal="pic-modal" id="close-picModal" class="close">关闭</button>
<!-- 模态框示例 -->
<div id="pic-modal">模态框内容</div>

对应JS代码

document.addEventListener('click', e => {
  // 触发开启逻辑
  const openTargetId = e.target.dataset.openModal
  if (openTargetId) {
    document.getElementById(openTargetId).style.display = 'flex'
  }
  // 触发关闭逻辑
  const closeTargetId = e.target.dataset.closeModal
  if (closeTargetId) {
    document.getElementById(closeTargetId).style.display = 'none'
  }
})

内容的提问来源于stack exchange，提问作者Rodrigo Yañez