2

Как реализовать на чистом 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>

Результат

6
  • Вам наверно надо не только листать параметры, но и загружать данные определённых страниц же?
    – Denis640Kb
    27 мар 2020 в 18:11
  • Конечно полный функционал было бы здорово увидеть и разобраться, что к чему. Но так как данное решение ищу в учебных целях буду рад любой полезной информации. К сожалению, в сети ничего не нашел. 27 мар 2020 в 19:24
  • 3
    Могу написать пару вариантов - через ajax, fletch, axios и на jquery. Смотря что хотите видеть.
    – Denis640Kb
    27 мар 2020 в 20:35
  • Так же надо понимать откуда будете брать данные и в каком виде, и как их хотите выводить.
    – Denis640Kb
    27 мар 2020 в 20:51
  • Пока уровень начальный)) подойдет что-нибудь по-проще. Данный переключатель страниц, предполагал так и использовать элементарно, для перехода между html-страницами. Понимаю, что можно без перезагрузки страницы. Будет здорово если с помощью ajax покажете реализацию. 28 мар 2020 в 8:10

1 ответ 1

2

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>

6
  • Решение то, что надо! Спасибо! Стили не нужны, а вот описание js кода было бы не лишним, для новичков)) 28 мар 2020 в 7:42
  • 1
    @ИванЦверкунов, добавил комментарии по Вашей просьбе. если будут трудности с пониманием кода, я могу сам код расписать по-проще для более удобного понимания 28 мар 2020 в 12:58
  • 1
    Спасибо! С комментариями намного лучше. 28 мар 2020 в 13:15
  • 1
    @ИванЦверкунов, конечно. {target} - это прием, который называется деструктуризация, подробно здесь. это всего лишь простой способ присваивать переменные 28 мар 2020 в 18:28
  • 1
    @ИванЦверкунов, document.querySelectorAll('.num-page') нам возвращает коллекцию найденных элементов. но эта коллекция не является настоящим массивом, потому на ней нельзя применять методы массива (например, такое как forEach). чтобы с неё сделать массив достаточно просто применить оператор..., как у меня в коде. после этого наша коллекция станет массивом. если что-то еще не понятно - пишите, здесь все свои) 28 мар 2020 в 18:32

Ваш ответ

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

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