Copy active class from one div to another div with a corresponding data attribute value-CodePudding

Is there a way to toggle the class selected that is currently set on the button in .ProductItem-gallery-slides to the corresponding button in .ProductItem-gallery-thumbnails with the same data attribute?

<div >
  <div >
    <button  data-thumbnail-index="1"> Hello 1 </button>
    <button  data-thumbnail-index="2"> Hello 2 </button>
    <button  data-thumbnail-index="3"> Hello 3 </button>
  </div>
</div>

<div  data-animation-role="image" data-product-gallery="slides">
  <button  data-slide-index="1"> Good bye 1</button>
  <button  data-slide-index="2">Good bye 2</button>
  <button  data-slide-index="3">Good bye 3</button>
</div>

CodePudding user response：

Whilst I agree with Rory - I suspect there is no example code so I hope the following is what you're after:

$('.ProductItem-gallery-thumbnails-item').on('click',function(){
    $('.ProductItem-gallery-slides-item').removeClass('selected');
    
    $('.ProductItem-gallery-slides-item[data-slide-index="' $(this).data('thumbnail-index') '"]').addClass('selected');
})