Flickity组件中is-selected类无法被JavaScript检测的解决方法

我用Flickity制作轮播图，需求是当幻灯片被选中时，根据对应幻灯片的data-color值修改body的背景色。但遇到的问题是：尽管控制台中能清晰看到选中的幻灯片带有is-selected类，JavaScript却无法检测到该类。

HTML代码 #

<div class="carousel" data-flickity='{ "wrapAround": true }'>
  <div class="carousel-cell" data-color="red">
    <img class="pic" src="./img/1.jpeg" alt="">
  </div>
  <div class="carousel-cell" data-color="blue">
    <img class="pic" src="./img/2.jpeg" alt="">
  </div>
  <div class="carousel-cell" data-color="green">
    <img class="pic" src="./img/3.jpeg" alt="">
  </div>
</div>

原JavaScript代码 #

let cell = document.querySelectorAll(".carousel-cell");
cell.forEach((c) => {
  if (c.classList.contains("is-selected")) {
    document.body.style.backgroundColor = "red";
  }
});

原因分析 #

你的JS代码是页面加载完成后一次性执行的，而Flickity是动态为选中的幻灯片添加is-selected类的（比如切换轮播时才会给对应元素加上这个类）。页面刚加载时，Flickity还没完成初始化或添加类，所以代码自然检测不到。

解决方案 #

利用Flickity官方提供的change事件监听轮播切换，每次切换时实时获取选中的幻灯片并修改背景色，同时初始化时也设置一次初始背景色：

// 获取轮播容器并初始化Flickity实例
const carousel = document.querySelector('.carousel');
const flkty = new Flickity(carousel, {
  wrapAround: true
});

// 监听轮播切换事件，每次切换时更新背景色
flkty.on('change', function() {
  const selectedCell = flkty.selectedElement;
  const bgColor = selectedCell.dataset.color;
  document.body.style.backgroundColor = bgColor;
});

// 页面初始化时，设置初始选中幻灯片对应的背景色
const initialCell = document.querySelector('.carousel-cell.is-selected');
if (initialCell) {
  document.body.style.backgroundColor = initialCell.dataset.color;
}

说明 #

• flkty.on('change')是Flickity的内置事件，每次轮播切换（包括自动轮播、手动滑动）都会触发，能实时获取到带有is-selected类的当前幻灯片
• 初始化时的额外逻辑是为了保证页面刚加载时，body背景色就和默认选中的幻灯片对应

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