求助：实现点击小图列表及主文本切换图片预览框的JS功能

需求概述 #

开发包含上方预览框和下方小预览图列表的图片预览组件，实现两个核心功能：

• 点击下方小预览图列表中的任意项，对应图片显示在上方预览框中，同时切换小图项的高亮状态
• 点击主文本时，触发相同的预览切换逻辑

现有HTML结构 #

<!--image list-->
<div class="image-list-container d-flex">
  <div class="image-list-item cursor-pointer image-highlight">
    <div id="" class="">
      <div class="hv-centered"><!----><img class="show-img img-fluid" src="https://5.imimg.com/data5/NR/TP/MY-9295383/hcl-desktop-500x500.jpg" alt="" /></div>
    </div>
  </div>
  <div class="image-list-item cursor-pointer" >
    <div id="" class="">
      <div class="hv-centered"><!----><img class="show-img img-fluid" src="https://tiimg.tistatic.com/fp/1/007/341/shock-proof-black-color-medium-size-acer-desktop-computer--825.jpg" alt="" /></div>
    </div>
  </div>
  <div class="image-list-item cursor-pointer" >
    <div id="" class="">
      <div class="hv-centered"><!----><img class="show-img img-fluid" src="https://cdn.britannica.com/97/155497-050-4C5BFFFC/laptop-computer.jpg" alt="" /></div>
    </div>
  </div>
  <!---->
  <div class="image-list-item cursor-pointer add-image-section add-download-img p-0">
    <div id="ember519" class="dropdown btn-group h-100">
      <button class="btn file-upload add-download-img-btn" type="button">
        <input id="add-images-btn" title="" multiple="" accept="image/gif,image/jpeg,image/png,image/bmp,image/jpg" class="upload form-control cursor-pointer" type="file" />
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon align-text-top action-icons icon-xlg fill-dropdown-blue">
          <path d="M256 15C122.9 15 15 122.9 15 256s107.9 241 241 241 241-107.9 241-241S389.1 15 256 15zm122 263H278v100c0 12.2-9.8 22-22 22s-22-9.8-22-22V278H134c-12.2 0-22-9.8-22-22s9.8 22 22 22h100V134c0-12.2 9.8-22 22-22s22 9.8 22 22v100h100c12.2 0 22 9.8 22 22s-9.8 22-22 22z"></path>
          <path fill="#FFF" d="M378 234H278V134c0-12.2-9.8-22-22-22s-22 9.8-22 22v100H134c-12.2 0-22-9.8-22 22s9.8 22 22 22h100v100c0 12.2 9.8 22 22 22s22-9.8 22-22V278h100c12.2 0 22 9.8 22 22s-9.8 22-22 22z"></path>
        </svg>
      </button>
      <button id="ember521" class="dropdown-toggle btn btn-secondary rounded-start-0 add-download-img-btn no-border" type="button"></button>
      <div class="dropdown-menu dropdown-menu-right">
        <button class="dropdown-item file-upload">
          <input id="ember522" title="" multiple="" accept="image/gif,image/jpeg,image/png,image/bmp,image/jpg" class="upload form-control cursor-pointer" type="file" />
          Add More Images
        </button>
        <button class="dropdown-item" data-ember-action="" data-ember-action-523="523">Download As ZIP</button>
      </div>
    </div>
  </div>
</div>
<!--/-->

JS实现代码 #

// 获取主预览图元素（请根据实际DOM结构调整选择器）
const mainPreview = document.querySelector('.main-preview-img');
// 获取所有可切换的小图项（排除添加图片的区域）
const imageItems = document.querySelectorAll('.image-list-item:not(.add-image-section)');

// 切换预览图的核心函数
function switchPreview(imgSrc) {
  // 更新主预览图地址
  if (mainPreview && imgSrc) {
    mainPreview.src = imgSrc;
  }
  // 更新小图项的高亮状态
  imageItems.forEach(item => item.classList.remove('image-highlight'));
  this.classList.add('image-highlight');
}

// 给每个小图项绑定点击事件
imageItems.forEach(item => {
  const targetImg = item.querySelector('.show-img');
  if (targetImg) {
    item.addEventListener('click', function() {
      switchPreview.call(this, targetImg.src);
    });
  }
});

// 绑定主文本点击事件（请根据实际主文本的选择器调整）
// 示例：假设主文本类名为`main-text-link`，且与小图项按索引一一对应
const mainTextLinks = document.querySelectorAll('.main-text-link');
mainTextLinks.forEach((link, index) => {
  link.addEventListener('click', function() {
    const targetItem = imageItems[index];
    if (targetItem) {
      const targetImg = targetItem.querySelector('.show-img');
      if (targetImg) {
        switchPreview.call(targetItem, targetImg.src);
      }
    }
  });
});

代码说明 #

1. 核心函数switchPreview：负责更新主预览图的图片地址，同时切换小图项的高亮样式
2. 小图项点击绑定：遍历所有小图项，给每个项绑定点击事件，触发预览切换
3. 主文本点击绑定：假设主文本与小图项按索引对应，点击主文本时触发对应小图的预览切换逻辑，可根据实际DOM结构调整选择器和匹配规则

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