0

Мне нужно отслеживать новые классы по клику, чтобы выполнялась определенная анимация. Сейчас работает в одну сторону. Но когда я кликаю next -> prev -> next -> prev, то ломается моя логика. Не понимаю в чем причина. Кроме того, мне кажется, что я слишком все усложняю, может можно как-то проще такое делать ? По сути это full-page slider с анимацией на jquery.

$('.footer__arrow .next').on("click", function (e) {
        var $target = $(e.target);
        if ($target.hasClass("next")) {
            
            // Animate
            console.log('remove class next, add class next-2');

            $(this).addClass("next-2").delay(1300).queue(function(){
                $(this).removeClass("next").queue();
            });

        } else if($target.hasClass("next-2")){
        
            // Animate
            console.log('remove class next-2, add class next-3');
            
            $(this).addClass("next-3").delay(1400).queue(function(){
                $(this).removeClass("next-2").queue();
            });
        }
    });


    $('.footer__arrow .prev').on("click", function (e) {
        var $target = $(e.target);
        if ($target.hasClass("prev") && $target.next().hasClass("next")) {
            console.log("Nothing");
        } else if ($target.next().hasClass("next-2")){
             // Animate
            console.log('remove class next-2, add class next');
            
            $(this).next().removeClass("next-2").addClass("next");

        } else if ($target.next().hasClass("next-3")){
             // Animate
            console.log('remove class next-3, add class next-2');
            
            $(this).next().removeClass("next-3").addClass("next-2");
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer__wrap">
  <div class="footer__arrow">
    <button class="footer__arrow-prev prev">prev</button>
    <button class="footer__arrow-next next">next</button>
  </div>
</div>

1 ответ 1

0
  1. Лучше не хардкодить конкретное число слайдов в JS код. Это чревато тем, что придется его переписывать, когда число слайдов увеличится.

  2. Вы вешаете обработчик клика на селекторы, которые сами же и удаляете.

  3. Блок внутри вызова queue, который должен вызываться после добавления класса next-3 не вызывается и оставляет висеть класс next-2.

  4. Странно хранить текущее состояние слайдера в классе на кнопке вперед. Используйте для этих целей родительский элемент.

Привел код к более-менее общему виду, убрав текущий слайд и максимальное число слайдов в data атрибуты .footer__wrap. Надеюсь наведу вас на нужное решение своим кодом.

$('.footer__arrow button').on("click", function(e) {
  var $target = $(e.target);
  var $slides = $target.parents('.slides');
  var direction = $target.hasClass('next') ? 1 : -1;
  var current_slide = parseInt($slides.data('slide'));
  console.log('Текущий слайд = ' + current_slide);
  if($slides.data('max') == current_slide && direction > 0 || current_slide == 1 && direction < 0) {
    console.log('ничего не происходит');
  } else {
    $slides.data('slide', parseInt(current_slide + direction));
    console.log('Переход на ' + parseInt(current_slide + direction) + ' слайд');
  } 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer__wrap slides" data-slide="1" data-max="3">
  <div class="footer__arrow">
    <button class="footer__arrow-prev prev">prev</button>
    <button class="footer__arrow-next next">next</button>
  </div>
</div>

4
  • Спасибо. А на тот случай, когда добавлю кнопки 01, 02, 03, для перехода на любой слайд, смогу я таким же образом обращаться к data-slide ?
    – max
    25 июл 2018 в 7:26
  • Конечно. Для таких кнопок тоже достаточно будет одного метода-обработчика, который бы вытаскивал из кнопки номер нужного слайда для перехода и перед анимацией в родительском элементе отмечал бы смену слайда.
    – sirWill
    25 июл 2018 в 7:33
  • Условие if else срабатывает только при клике на next. А вот как сделать анимацию по клику на prev? что то я этот момент не понял
    – max
    25 июл 2018 в 7:50
  • Проверил ещё раз и по логике и при запуске — отрабатывают обе кнопки. Смотрите внимательнее: селектор охватывает обе кнопки, внутри мы понимаем куда листать вперед или назад в зависимости от класса элемента, по которому кликнули. А дальше уже происходит листание внутри условия else, где происходит распознавание какой слайд нужно показывать.
    – sirWill
    26 июл 2018 в 11:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.