Children divs mimicking ".selected" toggleClass state from children of another div, all wi-CodePudding

I need some help please with 'syncing' the toggleClass ".selected" between two divs with children that have the same "data-slide-index" values.

Each ".ProductItem-gallery-slides-item" can toggle the class ".selected". But, I was wondering if there was a way for each ".ProductItem-gallery-thumbnails-item" to observe and mimic the toggleClass ".selected" onto the corresponding "data-slide-index" value. I do not wish for each ".ProductItem-gallery-thumbnails-item" to be clickable or hoverable as these are static items.

And so, is there a way for each ".ProductItem-gallery-thumbnails-item" to toggleClass ".selected" when each ".ProductItem-gallery-slides-item" has ".selected" toggled?

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

<section >

  <div >
    <div >
      <div  data-slide-index="1">Thumbnail one</div>
      <div  data-slide-index="2">Thumbnail two</div>
      <div  data-slide-index="3">Thumbnail three</div>
    </div>
  </div>

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

</section>

CodePudding user response：

You could achieve this with jQuery by defining an event handler for the click event and get in that handler the data-slide-index attribute of the clicked element:

const slide_index = $(this).data('slide-index');

Then you could use this value to select the belonging thumbnail:

$('.ProductItem-gallery-thumbnails-item[data-slide-index="'   slide_index   '"]').addClass('selected');

Working example:

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

slides_items.on('click', function() {
  const slide_index = $(this).data('slide-index');
  
  slides_items.removeClass('selected');
  thumbnails_items.removeClass('selected');
  
  $(this).addClass('selected');
  $('.ProductItem-gallery-thumbnails-item[data-slide-index="'   slide_index   '"]').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 >
      <div  data-slide-index="1">Thumbnail one</div>
      <div  data-slide-index="2">Thumbnail two</div>
      <div  data-slide-index="3">Thumbnail three</div>
    </div>
  </div>

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

</section>