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 语义驱动行为逻辑。
