4个视频弹窗触发器仅第一个生效的问题排查及解决方法

问题根源 #

你的代码存在两个核心问题：

• ID重复定义：HTML中所有按钮、弹窗、视频都使用了相同的ID（myBtn、myModal、myVideo），但DOM规范要求ID必须唯一。getElementById只会返回第一个匹配的元素，导致JS仅为第一组元素绑定了事件，后续元素完全未被处理。
• 事件绑定逻辑单一：JS代码仅针对单个元素编写事件逻辑，没有批量处理多组按钮与弹窗的机制。

修复方案 #

步骤1：修改HTML结构，添加唯一标识 #

将重复ID替换为唯一值，同时用自定义属性data-modal为按钮绑定对应弹窗的ID，建立按钮与弹窗的一一对应关系：

<!-- 第一组 -->
<button class="modal-btn" data-modal="modal1">01_prescricao_enf_med</button>
<div id="modal1" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <video id="video1" width="100%" controls>
      <source src="https://xxx.net.br/sin_saude/01_prescricao_enf_med.mp4" type="video/mp4">
      Your browser does not support HTML video.
    </video>
  </div>
</div>

<!-- 第二组 -->
<button class="modal-btn" data-modal="modal2">02_prescricao_enf_med</button>
<div id="modal2" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <video id="video2" width="100%" controls>
      <source src="https://xxx.net.br/sin_saude/02_prescricao_enf_med.mp4" type="video/mp4">
      Your browser does not support HTML video.
    </video>
  </div>
</div>

<!-- 第三组 -->
<button class="modal-btn" data-modal="modal3">03_prescricao_orcamento</button>
<div id="modal3" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <video id="video3" width="100%" controls>
      <source src="https://xxx.net.br/sin_saude/03_prescricao_orcamento.mp4" type="video/mp4">
      Your browser does not support HTML video.
    </video>
  </div>
</div>

<!-- 第四组 -->
<button class="modal-btn" data-modal="modal4">04_prescricao_orcamento</button>
<div id="modal4" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <video id="video4" width="100%" controls>
      <source src="https://xxx.net.br/sin_saude/04_prescricao_orcamento.mp4" type="video/mp4">
      Your browser does not support HTML video.
    </video>
  </div>
</div>

步骤2：修改JS逻辑，批量处理所有弹窗组 #

通过class选择器批量获取元素，循环绑定事件，同时处理关闭按钮与弹窗外部点击的关闭逻辑：

// 绑定所有弹窗按钮的点击事件
const modalBtns = document.querySelectorAll('.modal-btn');
modalBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    const modalId = this.getAttribute('data-modal');
    const modal = document.getElementById(modalId);
    const video = modal.querySelector('video');
    
    modal.style.display = 'block';
    video.play();
  });
});

// 绑定所有关闭按钮的点击事件
const closeBtns = document.querySelectorAll('.close');
closeBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    const modal = this.closest('.modal');
    const video = modal.querySelector('video');
    
    modal.style.display = 'none';
    video.pause();
  });
});

// 点击弹窗外部关闭弹窗并暂停视频
window.addEventListener('click', function(event) {
  if (event.target.classList.contains('modal')) {
    const video = event.target.querySelector('video');
    event.target.style.display = 'none';
    video.pause();
  }
});

关键改进点 #

• 用class替代重复ID，配合data-modal属性建立元素关联，避免硬编码。
• 使用querySelectorAll和forEach批量处理元素，无需重复编写相同逻辑。
• 用closest方法快速定位当前关闭按钮所属的弹窗，逻辑更灵活通用。

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