如何使用jQuery点击图片切换对应滑块按钮的active状态

需求：点击每张图片时，切换到滑块组件对应的幻灯片。当前激活的幻灯片对应的按钮需带有active类，只需定位到对应按钮并添加该类即可。

现有HTML结构 #

<div>
  <img src="#" id="image_slide_1">
  <img src="#" id="image_slide_2">
  <img src="#" id="image_slide_3">
  <img src="#" id="image_slide_4">
</div>

<div class="pf-slider-nav">
   <button type="button" class="active"></button> <!-- Slide 1 Button -->
   <button type="button"></button>                <!-- Slide 2 Button -->
   <button type="button"></button>                <!-- Slide 3 Button -->
   <button type="button"></button>                <!-- Slide 4 Button -->
</div>

尝试的代码 #

$('#image_slide_4').on('click', function() {
  $('.pf-slider-nav button:nth-child(3)').addClass('active').click();
});

优化后的通用解决方案 #

你当前的代码仅处理了第4张图片的点击，还存在按钮索引错误（nth-child从1开始计数，第4张图片对应第4个按钮，应为nth-child(4)）。更高效的方式是编写通用逻辑，无需为每张图片单独绑定事件：

// 为所有slide图片绑定点击事件
$('[id^="image_slide_"]').on('click', function() {
  // 从图片ID中提取对应的幻灯片序号
  const slideNum = $(this).attr('id').split('_')[2];
  // 移除所有按钮的active类
  $('.pf-slider-nav button').removeClass('active');
  // 为对应序号的按钮添加active类并触发点击
  $(`.pf-slider-nav button:nth-child(${slideNum})`).addClass('active').click();
});

该逻辑可自动适配任意数量的图片，无需重复编写代码。注意nth-child()的索引从1开始，与图片ID中的数字完全匹配，直接复用提取到的序号即可。

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