当首个或最后子div处于选中状态时切换父div的激活类

当然可以实现这个需求，只需要在现有点击逻辑基础上，添加对当前选中项位置的判断，再给父容器切换对应的类即可，同时要处理页面初始化时的初始状态。

修改后的完整代码示例 #

HTML

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

<section class="ProductItem-gallery">
  <div class="ProductItem-gallery-slides">
    <div class="ProductItem-gallery-carousel-controls">
      <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-slides-item selected" data-slide-index="1"> Item one </div>
    <div class="ProductItem-gallery-slides-item" data-slide-index="2"> Item two </div>
    <div class="ProductItem-gallery-slides-item" data-slide-index="3"> Item three </div>
    <div class="ProductItem-gallery-slides-item" data-slide-index="4"> Item four </div>
    <div class="ProductItem-gallery-slides-item" data-slide-index="5"> Item five </div>
    <div class="ProductItem-gallery-slides-item" data-slide-index="6"> Item six </div>
    <div class="ProductItem-gallery-slides-item" data-slide-index="7"> Item seven </div>
  </div>
</section>

CSS

.ProductItem-gallery,
.ProductItem-gallery-scroll,
.ProductItem-gallery-thumbnails,
.ProductItem-gallery-thumbnails-item,
.ProductItem-gallery-slides,
.ProductItem-gallery-slides-item {
  border: 2px solid #000000;
  margin: 10px;
  padding: 10px;
}

.ProductItem-gallery {
  border-color: yellow;
}

.ProductItem-gallery-scroll {
  border-color: green;
}

.ProductItem-gallery-thumbnails {
  border-color: orange;
}

.ProductItem-gallery-slides {
  border-color: blue;
}

.selected {
  color: red;
}

.ProductItem-gallery-next {
  float: right;
}

/* 新增类样式，方便直观看到效果 */
.ProductItem-gallery-slides.first-active {
  border-color: purple;
}

.ProductItem-gallery-slides.last-active {
  border-color: pink;
}

JavaScript

const slides_items = $('.ProductItem-gallery-slides-item');
const slides_container = $('.ProductItem-gallery-slides');

// 封装更新父容器类的函数，复用性更高
function updateContainerClasses() {
  // 判断第一个子元素是否选中，切换first-active类
  const isFirstSelected = slides_items.first().hasClass('selected');
  slides_container.toggleClass('first-active', isFirstSelected);
  
  // 判断最后一个子元素是否选中，切换last-active类
  const isLastSelected = slides_items.last().hasClass('selected');
  slides_container.toggleClass('last-active', isLastSelected);
}

// 点击事件逻辑
slides_items.on('click', function() {
  slides_items.removeClass('selected');
  $(this).addClass('selected');
  // 更新父容器类
  updateContainerClasses();
});

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

逻辑说明 #

1. 封装复用函数：把判断和切换类的逻辑单独抽成updateContainerClasses函数，无论是点击切换还是初始化都能调用，避免重复代码。
2. 判断选中位置：用first()和last()方法快速定位首尾子元素，结合hasClass('selected')判断是否激活。
3. 切换类：使用jQuery的toggleClass(className, condition)方法，当条件为true时添加类，false时移除，实现自动切换效果。
4. 初始化处理：页面加载完成后立即调用一次函数，确保初始选中的第一个元素能正确触发父容器的first-active类。

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