Question 36039 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Toggle active class in parent div when first or last child divs are active – Jquery

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 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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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 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>


  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search