如何让多个视频模态框触发器全部正常工作？_技术教程

html 中 id 必须唯一，而原代码中重复使用 `id="mybtn"` 和 `id="mymodal"` 导致 javascript 只能获取第一个元素，因此仅首个按钮生效。解决方案是改用 class 实现事件委托，并通过 dom 遍历动态关联按钮与对应模态框。

在 Web 开发中，ID 重复是导致 JavaScript 逻辑失效的常见根源。你当前的代码为每个按钮和模态框都设置了相同的 id="myBtn" 和 id="myModal"，而 document.getElementById() 仅返回文档中第一个匹配的元素，后续触发器完全被忽略——这正是“只有第一个视频能播放”的根本原因。

✅ 正确做法：弃用重复 ID，采用语义化 class + 事件委托（Event Delegation）

以下是一个简洁、可扩展、符合现代前端实践的完整解决方案：

✅ 核心改进点

将 id="myBtn" → class="myBtn"（所有按钮共用同一 class）
将 id="myModal" → class="modal"（所有模态框共用 class）
移除冗余的 id="myVideo"（无需全局引用，通过 querySelector 动态定位）
使用 document.body.addEventListener('click', ...) 统一监听，避免为每个按钮单独绑定事件
利用 el.nextElementSibling 精准定位紧邻按钮之后的模态框，实现“按钮 ↔ 对应视频”一对一映射

? 完整可运行代码示例

/* CSS：通过 active 类控制显隐 */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}
.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 90%;
  max-height: 90vh;
  overflow: auto;
}
.close {
  float: right;
  font-size: 28px;
  cursor: pointer;
}

// 单一事件监听器，高效且可维护
document.body.addEventListener('click', (e) => {
  const target = e.target;

  // 点击触发按钮 → 显示对应模态框并播放视频
  if (target.classList.contains('myBtn')) {
    const modal = target.nextElementSibling;
    if (modal && modal.classList.contains('modal')) {
      modal.classList.add('active');
      const video = modal.querySelector('video');
      if (video) video.play().catch(e => console.warn('Auto-play prevented:', e));
    }
  }
  // 点击模态框背景或关闭按钮（×）→ 隐藏并暂停
  else if (target.classList.contains('close') || target === e.currentTarget) {
    const modal = target.closest('.modal');
    if (modal) {
      modal.classList.remove('active');
      const video = modal.querySelector('video');
      if (video) video.pause();
    }
  }
});

// ✅ 补充：点击模态框外部区域关闭（增强体验）
document.addEventListener('click', (e) => {
  if (e.target.classList.contains('modal') || e.target === document.body) {
    const activeModal = document.querySelector('.modal.active');
    if (activeModal) {
      activeModal.classList.remove('active');
      const video = activeModal.querySelector('video');
      if (video) video.pause();
    }
  }
});