0

Есть меню, есть кнопки управления next и prev. Идея такая: при клике на пункт меню срабатывает определенное событие (например, фильтрация на клиенте) + сам пункт становится активным. При клике на next событие срабатывает на элементе, который следует сразу за активным пунктом и этот следующий пункт становится активным.
При клике на prev событие срабатывает на элементе, который находится перед активным пунктом и этот предыдущий пункт становится активным. Все это зациклено.

Пример здесь, реализация на jquery: https://codepen.io/Ilinykh/pen/MPGBXK

Проблема в следующем:

Если сначала выбрать пункт по клику на него, а потом начать нажимать на кнопки, то происходит рассинхрон и срабатывает не тот пункт, который должен срабатывать. На примере все должно быть понятно, прошу помочь.

 $(function(){
var $nav = $('.list'),
            $menuLink = $('.list').find('li a'),
            $currentItem = $menuLink.find('.active'),
            $prevBtn = $('.prev-btn'),
            $nextBtn = $('.next-btn');

  $menuLink.on('click', function () {
            $menuLink.removeClass('active');
            $(this).addClass('active');
        })

  $prevBtn.on('click', function (event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            $nextBtn.removeClass('active');
            $(this).addClass('active');

            $currentItem = ($currentItem > 0) ? $currentItem - 1 :       $menuLink.length - 1;
            $menuLink.eq($currentItem).addClass('active');
            $menuLink.eq($currentItem).trigger('click');
        })


  $nextBtn.on('click', function (event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            $prevBtn.removeClass('active');
            $(this).addClass('active');

            $currentItem = ($currentItem + 1 < $menuLink.length) ?       $currentItem + 1 : 0;
            $menuLink.eq($currentItem).addClass('active');
            $menuLink.eq($currentItem).trigger('click');
        })


});
1
  • Если вам помог ответ, примите его пожалуйста.
    – Axenow
    23 окт 2018 в 6:38

1 ответ 1

1

Вы просто забываете обновлять currentItem, когда выбираете что-то в меню:

  $menuLink.on('click', function () {
            $menuLink.removeClass('active');
            $(this).addClass('active');
      $currentItem = $menuLink.index(this);  // Вот этой строчки вам не хватало
        })

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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