如何让每个.video_play_button仅控制同组内对应的timeline_video？

你的问题出在当前代码会遍历所有视频元素执行播放/暂停操作，不管点击哪个按钮，都会触发所有视频的状态切换。要实现单个按钮控制同区块内的视频，我们需要让每个按钮精准定位到它所在section里的对应视频，而不是操作全部视频。

修改后的代码方案 #

保持你的HTML结构不变，只需要修改JavaScript部分：

(function () {
  // 获取所有播放按钮
  var playButtons = document.querySelectorAll('.video_play_button');

  // 单个按钮的点击处理函数
  function toggleVideo() {
    // 找到当前按钮所在的section容器
    const parentSection = this.closest('section');
    // 在该section内找到对应的视频元素
    const targetVideo = parentSection.querySelector('.timeline_video');
    
    // 切换视频播放状态
    if (targetVideo.paused) {
      targetVideo.play();
    } else {
      targetVideo.pause();
    }
  }

  // 给每个按钮绑定点击事件
  playButtons.forEach(function (button) {
    button.addEventListener('click', toggleVideo, false);
  });
})();

关键逻辑说明 #

• this：在点击事件函数里，this指向当前被点击的按钮元素，这样我们能精准定位触发操作的源头
• closest('section')：向上查找最近的<section>父元素，确保我们只在当前按钮所在的区块范围内查找视频
• parentSection.querySelector('.timeline_video')：只在当前section内获取视频元素，避免影响其他section里的视频

这样修改后，每个播放按钮就只会控制它所在section里的那个视频了。

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