如何复用JavaScript代码实现多播放按钮触发对应视频播放

嘿，这个问题很常见，我来给你捋捋怎么改！核心就是把原来针对单个ID的逻辑改成类驱动的通用逻辑，再用自定义属性存储每个按钮对应的视频链接，这样不管加多少个播放按钮，都不用重复写JS代码～

第一步：修改HTML结构 #

首先，把原来的单个id="video-icon"改成类选择器class="video-icon"，然后给每个播放按钮添加自定义属性data-video-src来存储对应的视频链接。另外，把视频弹窗改成全局唯一的（不用每个按钮里都嵌套弹窗，减少冗余DOM）：

<!-- 多个播放按钮，每个按钮对应不同的视频链接 -->
<a class="video-section prelative text-center white video-icon" role="button" aria-hidden="true" data-video-src="视频链接1">
  播放视频1
</a>
<a class="video-section prelative text-center white video-icon" role="button" aria-hidden="true" data-video-src="视频链接2">
  播放视频2
</a>

<!-- 全局通用的视频弹窗，放在页面任意位置（比如底部）即可 -->
<div class="video-popup">
  <div class="video-src">
    <div class="iframe-src">
      <iframe src="" allowfullscreen></iframe>
    </div>
  </div>
</div>

第二步：修改JavaScript代码 #

接下来调整JS逻辑，让它能适配所有带video-icon类的按钮，点击时动态获取当前按钮的视频链接并赋值给弹窗里的iframe：

// 给所有播放按钮绑定点击事件
$('.video-icon').on('click', function(e) {
  e.preventDefault();
  // 获取当前按钮对应的视频链接
  const targetVideoSrc = $(this).data('video-src');
  // 给弹窗的iframe设置视频链接
  $('.video-popup iframe').attr('src', targetVideoSrc);
  // 显示弹窗和视频容器
  $('.video-popup').css('display', 'flex');
  $('.iframe-src').slideDown();
});

// 弹窗关闭逻辑（和原来的逻辑基本一致，保持复用）
$('.video-popup').on('click', function(e) {
  const clickedNode = e.target.nodeName;
  const currentVideoSrc = $(this).find('iframe').attr('src');
  // 只有点击非iframe区域才关闭弹窗
  if (clickedNode !== 'IFRAME') {
    $('.video-popup').fadeOut();
    $('.iframe-src').slideUp();
    // 重置iframe的src，防止视频在后台继续播放
    $('.video-popup iframe').attr('src', '').attr('src', currentVideoSrc);
  }
});

关键思路解释 #

• 用类代替ID：ID是唯一的，只能绑定一个元素；类可以绑定多个元素，这样所有播放按钮都能共用同一套点击逻辑。
• 自定义属性存储视频链接：data-*属性是HTML5标准的自定义属性，用来存储元素的额外数据，这里用来存每个按钮对应的视频地址，点击时动态读取。
• 全局弹窗复用：只保留一个弹窗元素，避免每个按钮都嵌套弹窗造成DOM冗余，同时简化逻辑。

备注：内容来源于stack exchange，提问作者mlri