将".selected“类添加到具有与单击元素相同的数据属性的div

Question

我正在寻找一种方法，以添加一个".selected“类到每个div”..ProductItem图库-缩略图-项“，其中包含的数据属性与”..ProductItem图库-幻灯片-项目“时，单击”前一个“或”下一步“按钮。

作为参考，请看一下这个堆栈代码：JS - Adding an active class to an element with the same data attribute as the hovered element

这是相同的原则，除了我观察“以前”和“下一步”按钮点击。

​

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 class="ProductItem-gallery-slides">
    <div class="ProductItem-gallery-slides-item selected" data-product="1" >1</div>
    <div class="ProductItem-gallery-slides-item" data-product="2" >2</div>
    <div class="ProductItem-gallery-slides-item" data-product="3" >3</div>
    <div class="ProductItem-gallery-slides-item" data-product="4" >4</div>
</div>

<div class="ProductItem-gallery-carousel-controls enable-on-first-image-load enabled" data-first-img-load="">
          <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-scroll">
    <div class="ProductItem-gallery-thumbnails-item" data-product="1">1</div>
    <div class="ProductItem-gallery-thumbnails-item" data-product="2">2</div>
    <div class="ProductItem-gallery-thumbnails-item" data-product="3">3</div>
    <div class="ProductItem-gallery-thumbnails-item" data-product="4">4</div>
</div>

​

Answer 1

也许是这样的：

​

   $('.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 class="ProductItem-gallery-slides">
    <div class="ProductItem-gallery-slides-item selected" data-product="1" >1</div>
    <div class="ProductItem-gallery-slides-item" data-product="2" >2</div>
    <div class="ProductItem-gallery-slides-item" data-product="3" >3</div>
    <div class="ProductItem-gallery-slides-item" data-product="4" >4</div>
</div>

<div class="ProductItem-gallery-carousel-controls enable-on-first-image-load enabled" data-first-img-load="">
          <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-scroll">
    <div class="ProductItem-gallery-thumbnails-item" data-product="1">1</div>
    <div class="ProductItem-gallery-thumbnails-item" data-product="2">2</div>
    <div class="ProductItem-gallery-thumbnails-item" data-product="3">3</div>
    <div class="ProductItem-gallery-thumbnails-item" data-product="4">4</div>
</div>

​