1

введите сюда описание изображенияЕсть файл Json из него загружаем данные и формируем объекты на странице. Если пролистывать при помощи стрелок перескакивают страницы. Помогите понять в чем дело.

let block = document.querySelector('#block');
let pagination = document.querySelector('.pagination__list');
let prevPage = document.querySelector('.pagination__arrow_prev');
let nextPage = document.querySelector('.pagination__arrow_next');

let notesOnPage = 4;
let active;

async function getJson() {
  const fileJson = 'json/product.json';
  let response = await fetch(fileJson, {
    method: "GET"
  });
  if (response.ok) {
    let result = await response.json();
    loadProducts(result);
    alert("Данные загружены");
    console.log(result);
  } else {
    alert("ошибка")
  }
}

function loadProducts(data) {

  const proData = data.products;

  let countOfItems = Math.ceil(proData.length / notesOnPage);

  let paginationItem = [];
  for (let i = 1; i <= countOfItems; i++) {
    let li = document.createElement('li');
    li.classList.add('pagination__item');
    pagination.appendChild(li);
    let span = document.createElement('span');
    span.innerHTML = i;
    li.appendChild(span);
    paginationItem.push(span);
  }


  showPage(paginationItem[0]);


  for (let item of paginationItem) {
    item.addEventListener('click', function() {
      showPage(this);
    });
  }

  function showPage(item) {

    if (active) {
      active.classList.remove('_active')
    }
    active = item;
    item.classList.add('_active');

    let pageNum = +item.innerHTML;

    let start = (pageNum - 1) * notesOnPage;
    let end = start + notesOnPage;
    let notes = proData.slice(start, end);

    block.innerHTML = '';

    for (let item of notes) {
      const productTitle = item.title;
      const productImage = item.img;
      block.insertAdjacentHTML("beforeend",
        `<div class="block__item">
                    <h2 class="block__title">${productTitle}</h2>
                    <img class="block__img" src="img/icons/${productImage}" alt="">
                    </div>`
      );
      hideOverPages();
    }

    prevPage.addEventListener('click', function() {
      if (active.parentElement.previousElementSibling) {
        showPage(active.parentElement.previousElementSibling.querySelector('span'));
      }
    });
    nextPage.addEventListener('click', function() {
      if (active.parentElement.nextElementSibling) {
        showPage(active.parentElement.nextElementSibling.querySelector('span'));
      }
    });

    function hideOverPages() {
      let items = [...pagination.children];
      if (items.length > 5) {
        items.forEach(function(item) {
          item.classList.add('_hide')
        });
        items[0].classList.remove('_hide');
        if (active.parentElement.previousElementSibling) {
          active.parentElement.previousElementSibling.classList.remove('_hide');
        }
        active.parentElement.classList.remove('_hide');
        if (active.parentElement.nextElementSibling) {
          active.parentElement.nextElementSibling.classList.remove('_hide');
        }
        items[items.length - 1].classList.remove('_hide');
      }
    }
  }
}

getJson();
.block {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 50px;
  margin: 0 0 50px;
}

.block__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.55);
  padding: 5px;
}

.block__title {
  font-size: 22px;
  color: #9c9c9c;
  margin: 0 0 40px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination__arrow_prev {
  position: relative;
  cursor: pointer;
}

.pagination__arrow_prev:before {
  position: absolute;
  content: "";
  top: -15px;
  left: -50px;
  width: 0;
  height: 0;
  border-width: 15px 30px 15px 0;
  border-color: transparent rgba(0, 0, 0, 0.55) transparent transparent;
  border-style: solid;
  filter: drop-shadow(10px 0px 5px rgba(0, 0, 0, 0.55));
}

.pagination__arrow_next {
  position: relative;
  cursor: pointer;
}

.pagination__arrow_next:before {
  position: absolute;
  content: "";
  top: -15px;
  right: -50px;
  width: 0;
  height: 0;
  border-width: 15px 0 15px 30px;
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.55);
  border-style: solid;
  filter: drop-shadow(-10px 0px 5px rgba(0, 0, 0, 0.55));
}

.pagination__list {
  display: flex;
  gap: 0 20px;
}

.pagination__item {
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 22px;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.55);
}

.pagination__item span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 22px;
  cursor: pointer;
}

.pagination__item span._active {
  box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.55);
}

.pagination__item._hide {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0);
}

.pagination__item._hide:after {
  position: absolute;
  content: "• • •";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background-color: #fff;
}

.pagination__item._hide+._hide {
  display: none;
}

.pagination__link {
  font-size: 20px;
  color: #3b3b3b;
}
<div class="block" id="block"></div>

<div class="pagination" id="pagination">
  <div class="pagination__arrow pagination__arrow_prev"></div>
  <ul class="pagination__list">
  </ul>
  <div class="pagination__arrow pagination__arrow_next"></div>
</div>

{

"products": [ { "title": "Pagination 1", "img": "loading.gif" }, { "title": "Pagination 2", "img": "loading.gif" }, { "title": "Pagination 3", "img": "loading.gif" }, { "title": "Pagination 4", "img": "loading.gif" }, { "title": "Pagination 5", "img": "loading.gif" }, { "title": "Pagination 6", "img": "loading.gif" }, { "title": "Pagination 7", "img": "loading.gif" }, { "title": "Pagination 8", "img": "loading.gif" }, { "title": "Pagination 9", "img": "loading.gif" }, { "title": "Pagination 10", "img": "loading.gif" }, { "title": "Pagination 11", "img": "loading.gif" }, { "title": "Pagination 12", "img": "loading.gif" }, { "title": "Pagination 13", "img": "loading.gif" }, { "title": "Pagination 14", "img": "loading.gif" }, { "title": "Pagination 15", "img": "loading.gif" }, { "title": "Pagination 16", "img": "loading.gif" }, { "title": "Pagination 17", "img": "loading.gif" }, { "title": "Pagination 18", "img": "loading.gif" }, { "title": "Pagination 19", "img": "loading.gif" }, { "title": "Pagination 20", "img": "loading.gif" }, { "title": "Pagination 21", "img": "loading.gif" }, { "title": "Pagination 22", "img": "loading.gif" }, { "title": "Pagination 23", "img": "loading.gif" }, { "title": "Pagination 24", "img": "loading.gif" } ] }

3
  • Не знаю как добавить файл. 23 сен 2021 в 13:13
  • Что такое "перескакивают страницы"? Помогите понять в чем дело.
    – user176262
    23 сен 2021 в 13:15
  • добавил изображение 23 сен 2021 в 13:38

1 ответ 1

1

Естественно, все скачет. И чем дальше, тем больше будет скакать.

Сколько обработчиков события click Вы добавляете к кнопкам prevPage и nextPage?


Вынесите код

prevPage.addEventListener('click', function() { ... });
nextPage.addEventListener('click', function() { ... });

из функции showPage.

1
  • ) спасибо! Голова не соображает. Долго думал над тем как подгружать данные из json 23 сен 2021 в 13:54

Ваш ответ

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

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