使用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" />