Toggle active class in parent div when first or last child divs are active-CodePudding

Is there a way to toggle the class ".first-active" on the parent div ".ProductItem-gallery-slides" when the first ".ProductItem-gallery-slides-item" child has its active ".selected" class?

Also, toggle the class ".last-active" on the parent div ".ProductItem-gallery-slides" when the last ".ProductItem-gallery-slides-item" child has its active ".selected" class.

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

slides_items.on('click', function() {
  const slide_index = $(this).data('slide-index');
  slides_items.removeClass('selected');
  $(this).addClass('selected');
});

.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;
}

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

<section >

  

  <div >

    <div >
      <button  data-product-gallery="prev" aria-label="Previous">Previous</button>
      <button  data-product-gallery="next" aria-label="Next">Next</button>
    </div>

    <div  data-slide-index="1"> Item one </div>
    <div  data-slide-index="2"> Item two </div>
    <div  data-slide-index="3"> Item three </div>
    <div  data-slide-index="4"> Item four </div>
    <div  data-slide-index="5"> Item five </div>
    <div  data-slide-index="6"> Item six </div>
    <div  data-slide-index="7"> Item seven </div>

</div>

</section>

CodePudding user response：

As said CBroe in comment, you already made the job (almost): you have the index.

So if index === 1 or index === length of slides_items, you just have to toggle your class first-active or last-active on ProductItem-gallery-slides

CodePudding user response：

Figure it out on my own.

const gallery_slides = $(".ProductItem-gallery-slides"),
    slides_items = $(".ProductItem-gallery-slides-item");
gallery_slides.addClass("first-active"), slides_items.on("click", (function() {
    const s = $(this).data("slide-index"),
        e = $(".ProductItem-gallery-slides-item").length;
    1 === s ? gallery_slides.addClass("first-active") : gallery_slides.removeClass("first-active"), s === e ? gallery_slides.addClass("last-active") : gallery_slides.removeClass("last-active"), slides_items.removeClass("selected"), $(this).addClass("selected")
}));

.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;
}

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

<section >

  

  <div >

    <div >
      <button  data-product-gallery="prev" aria-label="Previous">Previous</button>
      <button  data-product-gallery="next" aria-label="Next">Next</button>
    </div>

    <div  data-slide-index="1"> Item one </div>
    <div  data-slide-index="2"> Item two </div>
    <div  data-slide-index="3"> Item three </div>
    <div  data-slide-index="4"> Item four </div>
    <div  data-slide-index="5"> Item five </div>
    <div  data-slide-index="6"> Item six </div>
    <div  data-slide-index="7"> Item seven </div>

</div>

</section>