使用JS填充HTML文件与div的数组使用JS

Question

我有一个容器，包括16个div元素堆叠在彼此的顶部。我想将显示的div元素数量限制为每页4个，并在内容下方显示分页。分页应该使用新的数字填充，因为未来将在html文件中添加新的div元素，但每页显示的元素数量应限制为4个。我试图实现一个纯Javascript解决方案，是我到目前为止已经试过：在HTML

的按钮（我不包括div元素，他们是16就像我说的，并携带“.events-section__main事件”之类的名称）：

<input type="button" id="first" onclick="firstPage()" value="first" /> 
<input type="button" id="next" onclick="nextPage()" value="next" /> 
<input type="button" id="previous" onclick="previousPage()" value="previous" /> 
<input type="button" id="last" onclick="lastPage()" value="last" /> 

JS：

var pageList = new Array(); 
var currentPage = 1; 
var numberPerPage = 4; 
var numberOfPages = 0; 
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; 

    pageList = events.slice(begin, end); 
    drawList(); 
    check(); 
} 

function drawList() { 
    for (i = 0; i < pageList.length; i++) { 
     pageList[i].classList.remove("events-section__main-event"); 
     pageList[i].classList.add("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(); 
} 

window.onload = load; 

我试图说明和喜使用具有display：none属性的css类的de元素。似乎我在那里的一半，但点击按钮时，仍然是元素混乱，他们只是消失。

Answer 1

这是对您的代码的一个小修改，可能对您有所帮助。唯一真正的变化是，在更新pageList之前，not-visible类别需要将添加到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; 
 
}

<div id="1" class="events-section__main-event">1</div> 
 
<div id="2" class="events-section__main-event">2</div> 
 
<div id="3" class="events-section__main-event">3</div> 
 
<div id="4" class="events-section__main-event">4</div> 
 
<div id="5" class="events-section__main-event not-visible">5</div> 
 
<div id="6" class="events-section__main-event not-visible">6</div> 
 
<div id="7" class="events-section__main-event not-visible">7</div> 
 
<div id="8" class="events-section__main-event not-visible">8</div> 
 
<div id="9" class="events-section__main-event not-visible">9</div> 
 
<div id="10" class="events-section__main-event not-visible">10</div> 
 
<div id="11" class="events-section__main-event not-visible">11</div> 
 
<div id="12" class="events-section__main-event not-visible">12</div> 
 
<div id="13" class="events-section__main-event not-visible">13</div> 
 
<div id="14" class="events-section__main-event not-visible">14</div> 
 
<div id="15" class="events-section__main-event not-visible">15</div> 
 
<div id="16" class="events-section__main-event not-visible">16</div> 
 

 
<input type="button" id="first" onclick="firstPage()" value="first" /> 
 
<input type="button" id="next" onclick="nextPage()" value="next" /> 
 
<input type="button" id="previous" onclick="previousPage()" value="previous" /> 
 
<input type="button" id="last" onclick="lastPage()" value="last" />