两个视频Lightbox锚点打开同一视频的问题求助

核心问题是你的代码没有建立触发锚点与对应视频容器的关联逻辑，导致所有点击都指向了同一个视频元素。下面是具体的修复方案：

1. 给元素添加关联标识 #

在触发锚点和对应的Lightbox容器上，用data-video-id属性绑定对应关系，确保每个锚点能精准找到目标视频：

<!-- 第一个视频组 -->
<a href="#" class="lightbox-trigger" data-video-id="video1">打开视频1</a>
<div class="lightbox" id="lightbox-video1" style="display:none;">
  <video id="video1" controls>
    <source src="your-video-1.mp4" type="video/mp4">
  </video>
  <button class="lightbox-close">关闭</button>
</div>

<!-- 第二个视频组 -->
<a href="#" class="lightbox-trigger" data-video-id="video2">打开视频2</a>
<div class="lightbox" id="lightbox-video2" style="display:none;">
  <video id="video2" controls>
    <source src="your-video-2.mp4" type="video/mp4">
  </video>
  <button class="lightbox-close">关闭</button>
</div>

2. 修改JavaScript逻辑，实现精准匹配 #

通过data-video-id获取目标视频ID，直接定位到对应的Lightbox容器和视频，避免全局选择导致的错误：

// 绑定所有锚点的点击事件
document.querySelectorAll('.lightbox-trigger').forEach(trigger => {
  trigger.addEventListener('click', e => {
    e.preventDefault();
    const targetVideoId = trigger.dataset.videoId;
    const targetLightbox = document.getElementById(`lightbox-${targetVideoId}`);
    
    // 显示目标Lightbox并播放视频
    targetLightbox.style.display = 'block';
    document.getElementById(targetVideoId).play();
  });
});

// 绑定关闭按钮事件
document.querySelectorAll('.lightbox-close').forEach(btn => {
  btn.addEventListener('click', () => {
    const parentLightbox = btn.closest('.lightbox');
    const video = parentLightbox.querySelector('video');
    
    // 隐藏Lightbox并重置视频状态
    parentLightbox.style.display = 'none';
    video.pause();
    video.currentTime = 0;
  });
});

补充说明 #

• 之前closest无效，大概率是因为你没有基于当前点击的触发元素去定位对应容器，而是全局选择了第一个容器，现在通过data属性关联的方式，彻底脱离DOM结构的依赖，逻辑更可靠。
• 确保Lightbox容器默认通过CSS或内联样式设置为display:none，初始隐藏。

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