如何优化剧集切换功能的HTML/JS代码结构？

第一步：精简现有HTML #

把每个按钮里重复的onclick逻辑删掉，改用自定义数据属性存储集数，HTML会变得非常简洁：

<button type="button" class="buttons" data-episode="2">Episode 2</button>
<button type="button" class="buttons" data-episode="3">Episode 3</button>
<button type="button" class="buttons" data-episode="4">Episode 4</button>
<!-- ... 依次写到Episode 17 -->

第二步：用统一的JS逻辑处理点击事件 #

把重复操作封装成通用逻辑，通过事件监听统一处理所有按钮的点击：

// 提前缓存DOM元素，避免每次点击重复查询，提升性能
const video = document.getElementById('my-video2_html5_api');
const episodeTitle = document.getElementById('s2');

// 获取所有剧集按钮
const buttons = document.querySelectorAll('.buttons');

// 给每个按钮绑定点击事件
buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    const epNum = btn.dataset.episode;
    // 设置视频源和标题
    video.src = `S2E${epNum}.mp4`;
    episodeTitle.innerHTML = `Season 2 Episode ${epNum}`;
  });
});

进阶：用JS动态生成所有按钮 #

如果不想手动写十几行按钮HTML，可以直接用JS循环生成，修改剧集范围只需要调整两个变量：

<!-- 只需要一个容器存放按钮 -->
<div id="episode-buttons"></div>

const video = document.getElementById('my-video2_html5_api');
const episodeTitle = document.getElementById('s2');
const buttonContainer = document.getElementById('episode-buttons');

// 定义剧集的起始和结束编号
const startEp = 2;
const endEp = 17;

// 循环生成按钮
for (let i = startEp; i <= endEp; i++) {
  const btn = document.createElement('button');
  btn.type = 'button';
  btn.className = 'buttons';
  btn.textContent = `Episode ${i}`;
  
  // 绑定点击逻辑
  btn.addEventListener('click', () => {
    video.src = `S2E${i}.mp4`;
    episodeTitle.innerHTML = `Season 2 Episode ${i}`;
  });
  
  buttonContainer.appendChild(btn);
}

核心优化点 #

• 消除重复代码：所有按钮共用同一套逻辑，后续修改只需要调整JS部分
• 性能提升：缓存DOM元素，避免重复调用getElementById
• 可维护性：动态生成按钮时，增减剧集只需要修改startEp和endEp的值

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