Как добавить класс отдельному слайду в slick-slider?

Question

[ajicapone]

При клике на кнопку product-item__icon_more задается селектор для этой же кнопки more-active в слайде, вопрос такой как сделать так чтобы при активном селекторе more-active только в выбранном слайде добавлялись селекторы rotate-front и rotate-back к классам product-item__front и product-item__back соответственно.

<div class="pie-item">
    <div class="product-item__front">
        <div class="product-item__img__wrap-block">
            <img class="pie-item__img" src="<?php bloginfo('template_directory')?>/static/img/pic/pie/kar.png" alt="">
            <span class="product-item__icon_more">
                 <svg class="icon icon-info">
                     <use xlink:href="<?php bloginfo('template_directory')?>/static/img/svg/symbol/sprite.svg#info"></use>
                 </svg>
             </span>
         </div>
         <div class="product-item__name__price">
              <div class="product-item__name-wrap">
                    <span class="product-item__name product-attri">Осетинский пирог</span>
                    <span class="product-item__name-2 product-attri">(с сыром)</span>
              </div>
          </div>
     </div>
     <div class="product-item__back">
           <p>Здесь будет описание</p>
     </div>
</div>

$(".product-item__icon_more").on("click", function(){
        $(this).addClass("more-active"); //добавляем класс текущей (нажатой)
        if($(this).hasClass('more-active')){
            $('.product-item__front').toggleClass('rotate-front');
            $('.product-item__back').toggleClass('rotate-back');
        }
    });

на данный момент этот код не срабатывает селекторы rotate-front и rotate-back добавляются всем слайдам

Comments

[Lord_Dantes]

го кодпен?

[ajicapone]

slave bb, https://codepen.io/ajicapone/pen/OKPQBx

[ajicapone]

slave bb, кликая на желтый круг должна переворачиваться одна карточка а не все,вот как это сделать,может я что упускаю

[Lord_Dantes]

ajicapone, сделайте функцию от this и find мб

[ajicapone]

slave bb, так же

[ajicapone]

slave bb, селектор more-action присваивается так как нужно но проверку не проходит

Answer 1

[Дмитрий]

Давайте разберемся с этим фрагментом:

$('.product-item__front').toggleClass('rotate-front');
$('.product-item__back').toggleClass('rotate-back');

toggleClass вы делаете для всех селекторов с классом. Поэтому переворачивается каждый блок.
Когда вы кликаете на icon_more, необходимо определить в каком блоке нажата кнопка, соответствующий блок и переворачивать.

Доработайте код:

$(".product-item__icon_more").on("click", function(){
        var p = $(this).parent().parent().parent(); // или с помощью .closest()
        
        $(this).addClass("more-active"); //добавляем класс текущей (нажатой)
        if($(this).hasClass('more-active')){
            $('.product-item__front', p).toggleClass('rotate-front');
            $('.product-item__back', p).toggleClass('rotate-back');
        }
    });

Comments

[ajicapone]

Большое спасибо!