js填充html,javascript – 使用JS填充带有div数组的html文件

这是对您的代码的一个小修改,可能对您有所帮助.唯一真正的变化是,在更新pageList之前,需要将不可见的类添加到pageList中的所有项目 – 这可确保在显示下一个集合之前隐藏旧集合.

var pageList = new Array();

var currentPage = 1;

var numberPerPage = 4;

var events = Array.prototype.slice.call(document.querySelectorAll(".events-section__main-event"));

function getNumberOfPages() {

return Math.ceil(events.length / numberPerPage);

}

function nextPage() {

currentPage += 1;

loadList();

}

function previousPage() {

currentPage -= 1;

loadList();

}

function firstPage() {

currentPage = 1;

loadList();

}

function lastPage() {

currentPage = numberOfPages;

loadList();

}

function loadList() {

var begin = ((currentPage - 1) * numberPerPage);

var end = begin + numberPerPage;

for (i = 0; i < pageList.length; i++) {

pageList[i].classList.add("not-visible"); // make the old list invisible

}

pageList = events.slice(begin, end);

drawList();

check();

}

function drawList() {

for (i = 0; i < pageList.length; i++) {

pageList[i].classList.remove("not-visible");

}

}

function check() {

document.getElementById("next").disabled = currentPage == numberOfPages ? true : false;

document.getElementById("previous").disabled = currentPage == 1 ? true : false;

document.getElementById("first").disabled = currentPage == 1 ? true : false;

document.getElementById("last").disabled = currentPage == numberOfPages ? true : false;

}

function load() {

loadList();

}

var numberOfPages = getNumberOfPages();

window.onload = load;

.events-section__main-event {

height: 25px;

width: 50px;

border: 1px black solid;

}

.not-visible {

display: none;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16