如何用JS/jQuery实现点击按钮切换视频显示，无需手动逐个绑定事件？

实现方案 #

方案1：无需修改现有HTML，直接替换JS代码即可 #

你现有的按钮、视频、段落id已经遵循固定命名规则（xxxBut/xxxVid/xxxPar），直接提取id前缀即可实现通用逻辑，后续新增资源只要保持命名规则，无需修改JS代码：

// 初始化：隐藏所有视频、所有id以Par结尾的段落
$('.VidStyle, [id$="Par"]').hide();

// 给所有lesson类按钮绑定统一点击事件，新增按钮自动生效
$('.lesson').on('click', function() {
  // 提取当前按钮id的前缀，比如firstBut提取得到first
  const targetPrefix = this.id.replace('But', '');
  // 隐藏全部视频和段落
  $('.VidStyle, [id$="Par"]').hide();
  // 仅显示当前按钮关联的视频和段落
  $(`#${targetPrefix}Vid`).show(400);
  $(`#${targetPrefix}Par`).show(800);
});

替换掉你之前写的所有初始化、事件绑定代码即可，不需要再单独写每个按钮的处理逻辑。

方案2：自定义属性关联（扩展性更强） #

如果后续命名规则可能变化，推荐用HTML的自定义data-属性显式关联按钮和对应资源，灵活度更高：

1. 调整按钮HTML，新增data-target属性，值为对应资源的统一前缀：

<button class="lesson" data-target="fourth" id="fourthBut">4</button>
<button class="lesson" data-target="third" id="thirdBut">3</button>
<button class="lesson" data-target="second" id="secondBut">2</button>
<button class="lesson" data-target="first" id="firstBut">1</button>

2. 对应JS逻辑：

// 初始化：隐藏所有视频、所有段落（建议给段落加统一类比如lesson-par，选择效率更高）
$('.VidStyle, .lesson-par').hide();

$('.lesson').on('click', function() {
  const target = $(this).data('target');
  $('.VidStyle, .lesson-par').hide();
  $(`#${target}Vid`).show(400);
  $(`#${target}Par`).show(800);
});

后续新增资源时，只需要给新按钮加class="lesson"和对应data-target值，视频、段落id按前缀+Vid/前缀+Par命名即可，不需要修改JS代码。

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