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(); } } });⚠️ 注意事项
- 不要在 ：现代浏览器普遍禁止无用户交互的自动播放（尤其含声音），play() 调用需在用户点击后触发，本方案已满足该条件。
- 确保 HTML 结构严格一致：每个 .myBtn 按钮后必须紧跟一个 .modal 元素，否则 nextElementSibling 会失败。
- 移动端兼容性：.close 元素建议添加 touch-action: manipulation 提升点击响应。
- 可扩展性：如需支持更多视频，只需复制
…
块，无需修改 js。
✅ 总结
通过将 ID 替换为 class、利用 DOM 相邻关系（nextElementSibling）和事件委托，你不仅解决了多触发器失效问题，还获得了更健壮、易维护、可无限扩展的视频模态框系统。这是处理重复交互组件的推荐范式——少写重复代码，多用结构关系，让 HTML 语义驱动行为逻辑。