如何在仅当Bootstrap轮播的首个与末尾thumb元素拥有selected类时为其父元素添加类？

我看了你的问题，你现在的代码有两个核心问题：一是只在页面加载时执行了一次判断，没有监听Bootstrap轮播的切换事件，所以点击「上一个/下一个」箭头后，不会重新检查缩略图的状态来更新类；二是两个独立的if语句逻辑冲突——比如当第一个缩略图选中时你添加了类，但紧接着判断最后一个没选中又会把类移除，导致预期效果失效。

下面是修正后的完整解决方案：

1. 封装状态判断函数 #

先写一个可复用的函数，用来统一判断首尾缩略图的状态，并更新父元素的类：

function updateCarouselClass() {
  // 获取轮播容器和首尾缩略图的选中状态
  const $carousel = $(".carousel");
  const isFirstThumbSelected = $(".thumb").first().hasClass("selected");
  const isLastThumbSelected = $(".thumb").last().hasClass("selected");

  // 只要首尾任意一个缩略图被选中，就添加类，否则移除
  if (isFirstThumbSelected || isLastThumbSelected) {
    $carousel.addClass("new-class");
  } else {
    $carousel.removeClass("new-class");
  }
}

2. 初始化+监听轮播事件 #

页面加载时先执行一次判断，处理初始状态；再监听Bootstrap轮播的slid.bs.carousel事件（这个事件会在轮播切换完成后触发，此时缩略图的selected类已经更新）：

// 页面初始化时执行一次，处理初始状态
updateCarouselClass();

// 监听轮播切换完成事件，每次切换后重新判断状态
$("#myCarousel").on("slid.bs.carousel", function() {
  updateCarouselClass();
});

完整代码整合 #

把上面的jQuery代码放在你的HTML底部（或者DOM加载完成的回调里），示例如下：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="row">
        <div id="carousel-selector-0" class="thumb selected" data-target="#myCarousel" data-slide-to="0"></div>
        <div id="carousel-selector-1" class="thumb " data-target="#myCarousel" data-slide-to="1"></div>
        <div id="carousel-selector-2" class="thumb " data-target="#myCarousel" data-slide-to="2"></div>
        <div id="carousel-selector-3" class="thumb " data-target="#myCarousel" data-slide-to="3"></div>
        <div id="carousel-selector-4" class="thumb " data-target="#myCarousel" data-slide-to="4"></div>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"></a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"></a>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<script>
function updateCarouselClass() {
  const $carousel = $(".carousel");
  const isFirstThumbSelected = $(".thumb").first().hasClass("selected");
  const isLastThumbSelected = $(".thumb").last().hasClass("selected");

  if (isFirstThumbSelected || isLastThumbSelected) {
    $carousel.addClass("new-class");
  } else {
    $carousel.removeClass("new-class");
  }
}

// 初始化执行
updateCarouselClass();

// 监听轮播切换完成事件
$("#myCarousel").on("slid.bs.carousel", updateCarouselClass);
</script>

这样处理后，每次点击轮播箭头切换完成时，都会自动检查首尾缩略图的selected状态，动态给轮播容器添加或移除new-class类。

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