Нумерация для переключения между страницами

Question

Как реализовать на чистом JS, переключение номера страницы, при клике на кнопки и на цифры?

<div class="btns-pages">
    <button  class="btn-left" type="submit"></button>
    <div class="nam-page nam-active">1</div>
    <div class="nam-page">2</div>
    <div class="nam-page">3</div>
    <div class="nam-page">4</div>
    <div class="nam-page">5</div>
    <button  class="btn-right" type="submit"></button>
</div>

Answer 1

UPD // добавил комментарии по просьбе ТС

P.S. стили не делал, но могу по желанию

document.querySelector('.btns-pages').addEventListener('click', e => { // вешаем один обработчик события клика на весь блок
  const { target } = e;  // цель, на которую мы кликнули
  const targetClassList = target.classList;  // массив классов цели, на которую мы кликнули
  const allNumPages = [ ...document.querySelectorAll('.num-page')];  // массив всех нумерованых блоков (блоки с классом .num-page), оператор '...' здесь не просто так
  const activePageNumber = allNumPages.findIndex(i => i.classList.contains('num-active'));  // номер (индекс) ранее выбранной страницы
  
  switch(true) {  // этот оператор смотрит на какую кнопку мы кликнули
    case targetClassList.contains('btn-left'): return activePageNumber && setNum(-1, true);  // если кликнули на кнопку влево
    case targetClassList.contains('btn-right'): return  (activePageNumber - allNumPages.length + 1) && setNum(1, true);  // если кликнули на кнопку вправо
    case targetClassList.contains('num-page'): return setNum(target.innerHTML);  // если кликнули прямо на число
  }
  
  function setNum(num, direction = null) {  // функция, которая задает выбранную страницу. параметр num - какую цифру мы выбрали (если мы нажали на цифру). параметр direction - направление стрелки, которую мы выбрали (если мы нажали на стрелку)
    allNumPages[activePageNumber].classList.remove('num-active'); // убирает класс .num-active с ранее выбранной страницы
    // здесь самый сок
    // если в вызываемой функции указан аргумент direction (он true или false), то берем индекс ранее выбранной цифры и плюсуем/минусуем 1, чтобы активировать предыдущую/следующую цифру
    // плюсовать или минусовать указывает аргумент num, который равен -1 либо 1
    // если в вызываемой функции не указан аргумен direction (он равен null) - значит мы кликнули прямо на число. берем содержимое выбранной цифры (через innerHTML) и по полученому индексу делаем элемент активным
    (allNumPages[direction === null ? target.innerHTML - 1 : activePageNumber + num]).classList.add('num-active') ;
  }
});

.btns-pages {
  display: flex;
  align-items: center;
}

.btns-pages > * {
  cursor: pointer;
}

.num-page {
  padding: 10px;
}

.num-page.num-active {
  border: 1px solid #e3c596;
  color: #e3c596;
}

<div class="btns-pages">
    <button  class="btn-left" type="submit"><-</button>
    <div class="num-page num-active">1</div>
    <div class="num-page">2</div>
    <div class="num-page">3</div>
    <div class="num-page">4</div>
    <div class="num-page">5</div>
    <button  class="btn-right" type="submit">-></button>
</div>

БЛОГ НА HUSL

Нумерация для переключения между страницами

Ответы (1 шт):