如何一次性为多个不同ID的元素应用JavaScript？优化多YouTube视频控制重复脚本

前置改造（仅需修改HTML结构） #

给所有视频容器添加统一类名 video-player-container，同时给每个打开弹窗的按钮新增data-video-target自定义属性，属性值填写对应视频容器的ID，示例如下：

<!-- 视频1触发按钮 -->
<button class="open-popup left" data-video-target="#videoplayer">打开酒店视频</button>
<!-- 视频1容器 -->
<div id="videoplayer" class="video-player-container">
  <iframe src="YouTube视频地址"></iframe>
</div>

<!-- 视频2触发按钮 -->
<button class="open-popup.left" data-video-target="#videoplayer2">打开Gans to go视频</button>
<!-- 视频2容器 -->
<div id="videoplayer2" class="video-player-container">
  <iframe src="YouTube视频地址"></iframe>
</div>

所有14个视频都按照上述规则调整即可。

通用控制脚本（仅需1份，替换原有14份独立脚本） #

<script>
$(document).ready(function() {
  // 提前缓存所有视频的原始播放地址，避免重复查询DOM
  const videoSrcCache = {};
  $('.video-player-container').each(function() {
    const playerId = '#' + $(this).attr('id');
    videoSrcCache[playerId] = $(this).children('iframe').attr('src');
  });

  // 统一绑定弹窗打开事件
  $('.open-popup.left').click(function(e) {
    e.preventDefault();
    const targetId = $(this).data('video-target');
    // 恢复对应视频的播放地址
    $(targetId).children('iframe').attr('src', videoSrcCache[targetId]);
    $('.popup-bg').fadeIn();
  });

  // 统一绑定弹窗关闭事件
  $('.close-modal-button').click(function(e) {
    e.preventDefault();
    // 清空所有视频的播放地址停止播放
    $('.video-player-container').children('iframe').attr('src', '');
    $('.popup-bg').fadeOut();
  });
});
</script>

优化收益 #

• 事件绑定次数从原来的28次（14个视频各绑定2次事件）缩减到2次，大幅降低内存占用，提升站点运行速度
• 提前缓存所有视频源地址，不需要每次点击都重复读取DOM属性，执行效率更高
• 后续新增视频不需要修改脚本，仅需按照HTML规则添加对应属性即可，维护成本极低

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