修复按钮3点击时无法播放对应data-id视频的问题

核心问题分析 #

1. 循环绑定按钮点击事件时，使用var声明循环变量导致作用域共享，所有点击事件触发时拿到的不是当前按钮对应的data-id。
2. 调用players.add时参数格式错误，单视频场景误用了播放列表参数，导致指定视频无法加载。

具体修改步骤 #

1. 修复事件绑定的作用域问题
   放弃原循环中用var遍历按钮的方式，改用forEach直接遍历按钮元素，确保每个按钮的点击事件能获取到自身的data-id：

   document.querySelectorAll('.yt-btn').forEach(btn => {
     btn.addEventListener('click', function() {
       const targetId = this.dataset.id;
       // 清空当前播放队列，避免残留视频
       players.removeAll();
       // 根据ID类型加载对应内容（单视频用videoId，播放列表用playlistId）
       if (targetId.startsWith('PL')) { // 可根据实际播放列表ID的特征调整判断逻辑
         players.add({
           playlistId: targetId,
           startSeconds: 0
         });
       } else {
         players.add({
           videoId: targetId,
           startSeconds: 0
         });
       }
     });
   });
   

2. 修正players.add的参数匹配
   原代码中统一使用playlistId参数加载内容，导致单视频ID无法被正确识别。通过判断ID类型，分别使用videoId（单视频）和playlistId（播放列表）参数，确保两种类型的内容都能正常加载。

验证效果 #

修改后点击第三个按钮时，会正确读取其data-id="-Xgi_way56U"，并以单视频模式加载对应内容，不会再播放按钮1的播放列表视频。

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