如何将指定容器按钮的selected类同步到同data属性的目标按钮？

你的HTML结构： #

<div class="ProductItem-gallery-scroll">
  <div class="ProductItem-gallery-thumbnails">
    <button class="ProductItem-gallery-thumbnails-item" data-thumbnail-index="1"> Hello 1 </button>
    <button class="ProductItem-gallery-thumbnails-item" data-thumbnail-index="2"> Hello 2 </button>
    <button class="ProductItem-gallery-thumbnails-item" data-thumbnail-index="3"> Hello 3 </button>
  </div>
</div>

<div class="ProductItem-gallery-slides" data-animation-role="image" data-product-gallery="slides">
  <button class="ProductItem-gallery-slides-item selected" data-slide-index="1"> Good bye 1</button>
  <button class="ProductItem-gallery-slides-item" data-slide-index="2">Good bye 2</button>
  <button class="ProductItem-gallery-slides-item" data-slide-index="3">Good bye 3</button>
</div>

当然可以实现，下面分两种场景给出具体代码：

1. 页面初始加载时同步选中状态 #

页面加载完成后，自动把slides里当前选中项的状态同步到对应缩略图：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 获取当前选中的slide
  const selectedSlide = document.querySelector('.ProductItem-gallery-slides-item.selected');
  if (!selectedSlide) return;

  const slideIndex = selectedSlide.dataset.slideIndex;
  // 找到对应索引的缩略图按钮
  const targetThumb = document.querySelector(`.ProductItem-gallery-thumbnails-item[data-thumbnail-index="${slideIndex}"]`);
  if (!targetThumb) return;

  // 清除所有缩略图的选中状态，再给目标缩略图加类
  document.querySelectorAll('.ProductItem-gallery-thumbnails-item').forEach(thumb => {
    thumb.classList.remove('selected');
  });
  targetThumb.classList.add('selected');
});

2. 动态同步选中状态（幻灯片切换时） #

如果幻灯片支持切换（点击、轮播等），需要在选中状态变化时自动同步：

场景A：通过点击幻灯片切换 #

给所有幻灯片按钮绑定点击事件，切换时同步缩略图：

document.addEventListener('DOMContentLoaded', () => {
  // 给所有slide按钮绑定点击事件
  document.querySelectorAll('.ProductItem-gallery-slides-item').forEach(slide => {
    slide.addEventListener('click', () => {
      // 先更新slides的选中状态
      document.querySelectorAll('.ProductItem-gallery-slides-item').forEach(s => {
        s.classList.remove('selected');
      });
      slide.classList.add('selected');

      // 同步到缩略图
      const slideIndex = slide.dataset.slideIndex;
      document.querySelectorAll('.ProductItem-gallery-thumbnails-item').forEach(thumb => {
        thumb.classList.remove('selected');
        if (thumb.dataset.thumbnailIndex === slideIndex) {
          thumb.classList.add('selected');
        }
      });
    });
  });
});

场景B：幻灯片状态由第三方脚本修改 #

如果幻灯片的选中状态是通过其他插件/脚本修改的，用MutationObserver监听类名变化，自动同步：

document.addEventListener('DOMContentLoaded', () => {
  const slidesContainer = document.querySelector('.ProductItem-gallery-slides');
  if (!slidesContainer) return;

  // 创建观察者实例
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 只监听class属性变化
      if (mutation.type !== 'attributes' || mutation.attributeName !== 'class') return;

      const targetSlide = mutation.target;
      // 确认当前元素是slide项且刚被选中
      if (targetSlide.classList.contains('ProductItem-gallery-slides-item') && targetSlide.classList.contains('selected')) {
        const slideIndex = targetSlide.dataset.slideIndex;
        // 同步缩略图状态
        document.querySelectorAll('.ProductItem-gallery-thumbnails-item').forEach(thumb => {
          thumb.classList.remove('selected');
          if (thumb.dataset.thumbnailIndex === slideIndex) {
            thumb.classList.add('selected');
          }
        });
      }
    });
  });

  // 配置监听选项：监听子元素的class属性变化
  observer.observe(slidesContainer, {
    attributes: true,
    attributeFilter: ['class'],
    subtree: true
  });
});

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