如何实现点击accordion（手风琴）时激活显示对应的图片？

实现方案 #

通过索引匹配手风琴和图片的对应关系，适配后续新增元素的需求，无需额外绑定ID。 #

步骤1：调整HTML右侧图片容器结构

给所有图片外层的div加上统一类名img-item，方便选择器定位，修改后的对应代码如下：

<div class="custom-images">
  <div class="img-item"><img src="https://dummyimage.com/600x400/000/fff"></div>
  <div class="img-item d-none"><img src="https://dummyimage.com/700x400/000/fff"> </div>
  <div class="img-item d-none"><img src="https://dummyimage.com/800x400/000/fff"> </div>
</div>

步骤2：替换原有JS逻辑

用索引匹配的方式实现联动，后续新增手风琴和图片时只要顺序对应，无需修改JS代码：

$(document).ready(function() {
  $(".accordion-header").click(function() {
    // 获取当前点击手风琴的索引（从0开始计数）
    const currentIndex = $(".accordion-header").index(this);
    // 隐藏全部图片
    $(".custom-images .img-item").addClass("d-none");
    // 显示与手风琴索引对应的图片
    $(".custom-images .img-item").eq(currentIndex).removeClass("d-none");
  });
});

原有CSS代码无需修改即可正常运行。该逻辑会自动匹配手风琴和图片的顺序，后续新增元素时只要保持两边顺序一致即可正常联动，无需额外修改配置。

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