Как по клику убрать класс у элемента и добавить предыдущему/следующему?

Question

[Breeze1]

Есть список и навигация вперёд/назад:

<ul>
  <li class="active"><span>First</span></li>
  <li><span>Second</span></li>
  <li><span>Third</span></li>
</ul>

<div class="nav">
  <span class="prev">Prev</span>
  <span class="next">Next</span>
</div>

По клику вперед убирается класс active у текущего элемента, и добавляется следующему, по клику назад убирается класс у текущего, и добавляется предыдущему:

$('.next').click(function(){
  
  $('ul li.active').removeClass('active').next().addClass('active');

});

$('.prev').click(function(){
  
  $('ul li.active').removeClass('active').prev().addClass('active');

});

Надо сделать, чтобы класс переключался бесконечно - например, если мы на 3 элементе, нажимаем "вперёд", класс active добавляется первому элементу.

https://codepen.io/brezze/pen/YdrrOL

Answer 1

[0xD34F]

Добавляем кнопкам атрибут, который будет указывать относительную позицию нового активного элемента:

<span class="prev" data-step="-1">Prev</span>
<span class="next" data-step="+1">Next</span>

Индекс нового активного элемента будет суммой индекса текущего и относительного положения нового. Чтобы произошёл переход из конца в начало - необходимо брать остаток от деления суммы на количество элементов, индекс несуществующего элемента, расположенного за последним, превратится в 0. Переход из начала в конец - в случае jquery ничего делать не надо, метод eq позволяет указывать отрицательные индексы, которые используются для отсчёта позиции элемента начиная с конца; в случае чистого js надо будет добавить к сумме количество элементов, чтобы потенциальное отрицательное значение стало положительным, и при этом не изменился остаток от деления.

const itemSelector = 'li';
const buttonSelector = '[data-step]';
const activeClass = 'active';

$(buttonSelector).click(function() {
  const { step } = this.dataset;
  const $items = $(itemSelector);
  const $active = $items.filter(`.${activeClass}`);

  $active.removeClass(activeClass);
  $items.eq(($active.index() + +step) % $items.length).addClass(activeClass);
});

// или

const items = document.querySelectorAll(itemSelector);
let index = 0;

document.querySelectorAll(buttonSelector).forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick({ currentTarget: { dataset: { step } } }) {
  items[index].classList.remove(activeClass);
  index = (index + items.length + +step) % items.length;
  items[index].classList.add(activeClass);
}

Comments

[Breeze1]

Супер, спасибо