如何实现单个模态框支持多个按钮点击触发生效

问题原因 #

你的问题出在JavaScript的元素选择逻辑：

• document.getElementById("btn") 只能获取单个DOM元素（id属性在页面中要求全局唯一，该方法永远只返回第一个匹配的元素，无匹配时返回null）
• 你所有的Play按钮都是通过class="btn"标识的，没有设置id="btn"属性，需要用类选择器批量获取所有按钮，再逐个绑定点击事件。

修复方案 #

直接替换页面中原有的<script>标签内容即可：

// 批量获取所有class为btn的播放按钮
const btns = document.querySelectorAll(".btn");
const videoContainer = document.getElementById("videoContainer");
const closeBtn = document.getElementById("close");

// 遍历所有按钮绑定点击事件
btns.forEach(btn => {
  btn.addEventListener('click', (e) => {
    // 阻止a标签默认的跳转行为
    e.preventDefault();
    videoContainer.classList.add('show');
  })
})

closeBtn.addEventListener('click', () => {
  videoContainer.classList.remove('show');
  // 关闭模态框时自动暂停视频、重置播放进度
  const video = videoContainer.querySelector('video');
  video.pause();
  video.currentTime = 0;
})

可选优化（不同按钮播放对应视频） #

如果后续需要点击不同行的Play按钮播放对应视频，只需要给每个<a>标签加自定义属性存储视频地址，示例：

<a href="#" class="btn" data-video="Videocapture.mp4">Play</a>

然后修改点击事件里的逻辑，动态替换视频地址：

btn.addEventListener('click', (e) => {
  e.preventDefault();
  const video = videoContainer.querySelector('video');
  // 读取当前按钮绑定的视频地址
  video.src = btn.dataset.video;
  video.play();
  videoContainer.classList.add('show');
})

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