I am looking for a way to add a ".selected" class to each div ".ProductItem-gallery-thumbnails-item" that contains the same data attribute as ".ProductItem-gallery-slides-item" when either the "previous" or "next" button is clicked.

For reference, please take a look at this stack code: JS - Adding an active class to an element with the same data attribute as the hovered element

It's the same principle except that I am observing "previous" and "next" button clicks.

const linkContainerPrev = document.querySelector(".ProductItem-gallery-prev");
const linkContainerNext = document.querySelector(".ProductItem-gallery-next");

linkContainerPrev.addEventListener("click", function(e) {
  if (e.target.className !== "ProductItem-gallery-slides-item") return;
  const productIdPrev = e.target.dataset.product;
  selectActive(productIdPrev);
});

linkContainerNext.addEventListener("click", function(e) {
  if (e.target.className !== "ProductItem-gallery-slides-item") return;
  const productIdNext = e.target.dataset.product;
  selectActive(productIdNext);
});

function selectActive(productId) {
  const allProducts = document.querySelectorAll(".ProductItem-gallery-thumbnails-item");
  for (let product of allProducts) {
    if (product.dataset.product === productId) {
      product.classList.add("selected");
    } else {
      product.classList.remove("selected");
    }
  }
}

.selected {
  color: red;
}

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

<div >
    <div  data-product="1" >1</div>
    <div  data-product="2" >2</div>
    <div  data-product="3" >3</div>
    <div  data-product="4" >4</div>
</div>

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

<div >
    <div  data-product="1">1</div>
    <div  data-product="2">2</div>
    <div  data-product="3">3</div>
    <div  data-product="4">4</div>
</div>

CodePudding user response：

Maybe like this:

   $('.ProductItem-gallery-slides-item').click(function(){
      $('.ProductItem-gallery-slides-item').removeClass('selected'); /*remove old selected*/
      $(this).addClass('selected'); /* add new selected for curent item */

      var page = $('.ProductItem-gallery-slides-item.selected').attr('data-product');/* curent page */

      $('.ProductItem-gallery-thumbnails-item').hide(); /* hide all thumbnails */
      $('.ProductItem-gallery-thumbnails-item').filter('[data-product=' page ']').show(); /* show curent page content */

   });

   $('.product-item-gallery-carousel-control').click(function(){
     var role = $(this).attr('data-product-gallery'); /* prev or next */
     var page = $('.ProductItem-gallery-slides-item.selected').attr('data-product');/* curent page */
     page = parseInt(page)||0; /* string to integer */
     var pages_count = $('.ProductItem-gallery-slides-item').length; /* total pages */
     var new_page = page;
     if(role == 'next' && page < pages_count){
        new_page  ; /* next page */
     }
     if(role == 'prev' && page > 1){
        new_page--; /* prev page */
     }
     $('.ProductItem-gallery-slides-item').filter('[data-product=' new_page ']').click(); /* goto curent page */
   });

   $('.ProductItem-gallery-slides-item').filter('[data-product=1]').click(); /* start page 1 */

     .ProductItem-gallery-slides-item{
        display : inline-block;
        padding : 2px;
        margin  : 1px;
        border-style: solid;
        border-width :1px;
        cursor: pointer;
     }
     .ProductItem-gallery-slides-item.selected{
        cursor: default;
        color:red;
        border-color:red;
     }
     .ProductItem-gallery-thumbnails-item{
        display : none;
        min-width : 100px;
        min-height: 100px;
        border-style: solid;
        margin : 10px;
     }

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

<div >
    <div  data-product="1" >1</div>
    <div  data-product="2" >2</div>
    <div  data-product="3" >3</div>
    <div  data-product="4" >4</div>
</div>

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

<div >
    <div  data-product="1">1</div>
    <div  data-product="2">2</div>
    <div  data-product="3">3</div>
    <div  data-product="4">4</div>
</div>