JavaScript嵌套forEach循环实现弹窗关闭失效问题排查与解决

问题场景 #

页面中有4个带关闭按钮的弹窗，HTML结构示例如下：

<div class="description-modal dm-1">
<i class="fa-solid fa-xmark close-m" id="close-m-1"></i>
<h3>Test</h3>
</div>

弹窗通过类名dm-1到dm-4设置了1-4的标识，点击可添加active类激活弹窗。尝试用嵌套forEach循环实现关闭功能，代码如下，但无报错却无法正常工作：

const modals_all = document.querySelectorAll('.description-modal');
const close_buttons = document.querySelectorAll('.close-m')


modals_all.forEach(modal =>{
  close_buttons.forEach(close_button =>{
    close_button.addEventListener('click', ()=>{
      if (modal.classList.contains('active')){
        modal.classList.remove('active')
      } else {
        return
      }
    })
  })
});

错误原因 #

嵌套forEach循环会导致每个关闭按钮被绑定4次点击事件（对应4个弹窗），点击时会依次触发所有弹窗的移除逻辑。重复绑定的事件会造成逻辑混乱：比如点击某一个关闭按钮，会尝试遍历所有弹窗执行移除操作，最终出现不符合预期的行为。

正确解决方法 #

方法1：利用DOM层级关系（最直接） #

每个关闭按钮是弹窗的子元素，直接通过closest()方法找到父级弹窗，移除active类：

const close_buttons = document.querySelectorAll('.close-m')

close_buttons.forEach(close_button => {
  close_button.addEventListener('click', () => {
    // 找到最近的弹窗容器
    const modal = close_button.closest('.description-modal')
    modal.classList.remove('active')
  })
})

方法2：通过ID/类名关联匹配 #

利用关闭按钮和弹窗的标识对应关系（close-m-1对应dm-1），提取标识后找到对应弹窗：

const close_buttons = document.querySelectorAll('.close-m')

close_buttons.forEach(close_button => {
  close_button.addEventListener('click', () => {
    // 从关闭按钮ID中提取数字标识
    const modalNumber = close_button.id.split('-')[2]
    // 找到对应弹窗
    const modal = document.querySelector(`.description-modal.dm-${modalNumber}`)
    if (modal) {
      modal.classList.remove('active')
    }
  })
})

方法3：事件委托（高效推荐） #

只在文档上绑定一次点击事件，通过事件冒泡判断点击目标是否为关闭按钮，适合动态添加的弹窗场景：

document.addEventListener('click', (event) => {
  // 判断点击元素是否是关闭按钮
  if (event.target.matches('.close-m')) {
    const modal = event.target.closest('.description-modal')
    modal.classList.remove('active')
  }
})

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