点击上/下页按钮，为匹配data属性的缩略图添加.selected类

需求说明 #

点击「Previous」或「Next」按钮时，为所有与当前激活的.ProductItem-gallery-slides-item拥有相同data-product属性的.ProductItem-gallery-thumbnails-item元素添加.selected类。

问题分析 #

原代码核心问题在于：监听按钮点击时错误判断事件目标为幻灯片元素，但按钮点击的目标是按钮本身，导致后续逻辑完全无法触发；同时缺少点击按钮时切换激活幻灯片的逻辑，无法实现状态同步。

解决方案代码 #

HTML（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ProductItem-gallery-slides">
    <div class="ProductItem-gallery-slides-item selected" data-product="1" >1</div>
    <div class="ProductItem-gallery-slides-item" data-product="2" >2</div>
    <div class="ProductItem-gallery-slides-item" data-product="3" >3</div>
    <div class="ProductItem-gallery-slides-item" data-product="4" >4</div>
</div>

<div class="ProductItem-gallery-carousel-controls enable-on-first-image-load enabled" data-first-img-load="">
          <button class="product-item-gallery-carousel-control ProductItem-gallery-prev" data-product-gallery="prev" aria-label="Previous">Previous</button>
          <button class="product-item-gallery-carousel-control ProductItem-gallery-next" data-product-gallery="next" aria-label="Next">Next</button>
        </div>

<div class="ProductItem-gallery-scroll">
    <div class="ProductItem-gallery-thumbnails-item" data-product="1">1</div>
    <div class="ProductItem-gallery-thumbnails-item" data-product="2">2</div>
    <div class="ProductItem-gallery-thumbnails-item" data-product="3">3</div>
    <div class="ProductItem-gallery-thumbnails-item" data-product="4">4</div>
</div>

CSS（保持原有样式）

.selected {
  color: red;
}

修改后的JavaScript

const prevBtn = document.querySelector(".ProductItem-gallery-prev");
const nextBtn = document.querySelector(".ProductItem-gallery-next");
const slides = document.querySelectorAll(".ProductItem-gallery-slides-item");

// 页面加载时先同步一次缩略图状态
syncThumbnailsWithActiveSlide();

prevBtn.addEventListener("click", () => switchSlide("prev"));
nextBtn.addEventListener("click", () => switchSlide("next"));

// 切换幻灯片并同步状态
function switchSlide(direction) {
  const currentActiveIndex = Array.from(slides).findIndex(slide => slide.classList.contains("selected"));
  let newActiveIndex;

  // 计算新的激活幻灯片索引，支持循环切换
  if (direction === "prev") {
    newActiveIndex = currentActiveIndex === 0 ? slides.length - 1 : currentActiveIndex - 1;
  } else {
    newActiveIndex = currentActiveIndex === slides.length - 1 ? 0 : currentActiveIndex + 1;
  }

  // 更新幻灯片的选中状态
  slides[currentActiveIndex].classList.remove("selected");
  slides[newActiveIndex].classList.add("selected");

  // 同步缩略图的选中状态
  syncThumbnailsWithActiveSlide();
}

// 根据当前激活幻灯片同步缩略图
function syncThumbnailsWithActiveSlide() {
  const activeSlide = document.querySelector(".ProductItem-gallery-slides-item.selected");
  const activeProductId = activeSlide.dataset.product;
  
  document.querySelectorAll(".ProductItem-gallery-thumbnails-item").forEach(thumb => {
    thumb.classList.toggle("selected", thumb.dataset.product === activeProductId);
  });
}

关键修改说明 #

1. 修正事件监听逻辑：移除原代码中错误的事件目标判断，直接绑定按钮点击事件。
2. 补充幻灯片切换逻辑：点击按钮时计算新的激活幻灯片索引，更新幻灯片的.selected类，支持循环切换。
3. 统一状态同步函数：通过syncThumbnailsWithActiveSlide函数，根据当前激活幻灯片的data-product值，批量更新缩略图的选中状态。
4. 初始化同步：页面加载时自动同步一次缩略图与初始激活幻灯片的状态，保证初始显示正确。

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