Есть меню, есть кнопки управления 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');
})
});