@ajicapone

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

При клике на кнопку 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 добавляются всем слайдам
  • Вопрос задан
  • 479 просмотров
Решения вопроса 1
Thelema
@Thelema
Давайте разберемся с этим фрагментом:
$('.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');
        }
    });
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы