使用jQuery/Javascript实现页面多视频点击按钮弹出播放功能

问题排查与修复 #

你原有代码无响应、逻辑失效的核心问题如下：

• 最直接的无响应原因：$(this).closest('.trailerdivbox') 查找不到对应元素，因为.trailerdivbox不是按钮的祖先节点，closest()仅向上查找当前元素的祖先节点，返回空对象后后续设置display属性完全不生效
• 类选择器错误：查找关闭容器时写的closest("close")缺少类选择器前缀.，无法匹配到class为close的元素
• 类型不匹配：window.onclick中判断event.target == modal时，modal是jQuery封装对象，event.target是原生DOM元素，对比永远为false，关闭逻辑完全不生效
• 事件绑定冲突：每次点击按钮都会覆盖绑定window.onclick事件，多视频场景下只有最后一个绑定的视频关闭逻辑会生效

修复后可直接运行的完整代码 #

JS代码（替换原有JS即可）

// 绑定所有视频按钮的点击事件
$('.watchbutton').on('click', function() {
  // 定位当前按钮所属的卡片容器，再查找对应模态框，避免匹配到其他视频的弹窗
  const currentModal = $(this).closest('.card').find('.trailerdivbox');
  currentModal.show();
});

// 全局委托模态框关闭事件，避免重复绑定、覆盖问题
$(document).on('click', '.trailerdivbox', function(e) {
  // 仅点击视频以外的黑色半透明区域时触发关闭
  if (e.target === this) {
    const videoIframe = $(this).find('.trailervideo');
    // 重置iframe地址实现关闭后停止播放，避免关弹窗后视频还在发声
    const videoSrc = videoIframe.attr('src');
    videoIframe.attr('src', '');
    videoIframe.attr('src', videoSrc);
    $(this).hide();
  }
});

CSS代码（仅需要给模态框加层级避免被其他元素遮挡，其余原有样式不变）

/* Watch Trailer Button CSS */
.watchbutton {
  background-color: #f2f2f2;
  color: red;
  font-weight: 600;
  border: none;
  padding: 10px 12px;
}
.watchbutton:hover {
  background-color: #e2e2e2;
  cursor: pointer;
}
.trailerdivbox {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999; /* 新增：保证弹窗在页面最上层 */
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  top: 50%;
  transform: translateY(-50%); /* 新增：视频垂直居中显示 */
}
.videoWrapper iframe {
  position: absolute;
  max-width: 560px;
  max-height: 315px;
  width: 95%;
  height: 95%;
  left: 0;
  right: 0;
  margin: auto;
}

HTML代码无需修改

修复后支持同页面任意数量的卡片视频组，点击对应按钮弹出对应视频，点击黑色半透明区域自动关闭弹窗、停止视频播放，无需给每个视频单独配置ID。

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