17370845950

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 精准定位紧邻按钮之后的模态框，实现“按钮 ↔ 对应视频”一对一映射

? 完整可运行代码示例

01_prescricao_enf_med

  
    ×
    
  


02_prescricao_enf_med

  
    ×
    
  

/* 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();
    }
  }
});

⚠️ 注意事项

• 不要在 ：现代浏览器普遍禁止无用户交互的自动播放（尤其含声音），play() 调用需在用户点击后触发，本方案已满足该条件。
• 确保 HTML 结构严格一致：每个 .myBtn 按钮后必须紧跟一个 .modal 元素，否则 nextElementSibling 会失败。
• 移动端兼容性：.close 元素建议添加 touch-action: manipulation 提升点击响应。
• 可扩展性：如需支持更多视频，只需复制 ...... 块，无需修改 JS。

✅ 总结

通过将 ID 替换为 class、利用 DOM 相邻关系（nextElementSibling）和事件委托，你不仅解决了多触发器失效问题，还获得了更健壮、易维护、可无限扩展的视频模态框系统。这是处理重复交互组件的推荐范式——少写重复代码，多用结构关系，让 HTML 语义驱动行为逻辑。