Спрятать кнопку если страница = 1
Здравствуйте, у меня такая ситуация, мне нужно сделать пагинацию, при которой кнопка "назад" исчезает если она = 1, и появляется если 2 и больше. Сделать всё на чисто JS:help:
<div class="pagenumbers" id="pagination">
<button id="previous-page">Назад</button>
<div class="number-of-page"></div>
<button id="next-page">Далее</button>
</div>
const prevBtn = document.getElementById('previous-page')
const nextBtn = document.getElementById('next-page')
const numberOfPage = document.querySelector('.number-of-page')
let pageNumber = 1
numberOfPage.textContent = pageNumber
// Пагинация
nextBtn.addEventListener('click', () => {
pageNumber++
posts.innerHTML=''
numberOfPage.textContent = pageNumber
getPage()
})
prevBtn.addEventListener('click', () => {
pageNumber--
posts.innerHTML=''
numberOfPage.textContent = pageNumber
getPage()
})
|
BarsBelka,
в строки 12 и 19 добавить prevBtn.hidden = pageNumber == 1; |
Если у тебя изначально
Цитата:
А после того как сделаешь переход на pageNumber > 1 - убирай ту не видимость (удаляй класс off). |
Она исчезает только если нажать "вперед" и потом снова "назад", при перезагрузке страницы кнопка остаётся
|
У меня было так
if(pageNumber === 1){
prevBtn.classList.add('hide')
} else {
prevBtn.classList.remove('hide')
}
Но она не появлялась в любом случае |
А что делает getPage()?
Он полностью перезагружает страницу? Если у вас полностью одностраничный сайт, меняется только контент, то вы должны сохранять состояние текущей страницы в sessionStorage, или правильнее менять текущий url и работать с history. |
getPage получает список постов из API jsonplaceholder, выводит он их с лимитом в 10 постов, там нет ничего связанного с пагинацией
|
BarsBelka,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="pagenumbers" id="pagination">
<button id="previous-page">Назад</button>
<div class="number-of-page"></div>
<button id="next-page">Далее</button>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const prevBtn = document.getElementById('previous-page');
const nextBtn = document.getElementById('next-page');
const numberOfPage = document.querySelector('.number-of-page');
let pageNumber = 1
numberOfPage.textContent = pageNumber;
function page(up = 0) {
pageNumber += up;
//posts.innerHTML='';
numberOfPage.textContent = pageNumber;
//getPage()
prevBtn.hidden = pageNumber == 1;
}
page()
// Пагинация
nextBtn.addEventListener('click', () => page(1))
prevBtn.addEventListener('click', () => page(-1))
});
</script>
</body>
</html>
|
Этот вариант работает, но у меня выводит 20 постов вместо 10 положенных, хотя при получении ссылки стоит _limit=10
|
Я решил проблему, чтобы сделать всё красиво, нужно вызвать следующую функцию перед обработчиком и в обработчике каждой кнопки
const disablePrevBtn = () => {
if (pageNumber == 1){
prevBtn.disabled = true
} else {
prevBtn.disabled = false
}
}
Может кому-то поможет |
| Часовой пояс GMT +3, время: 09:13. |