JSを使ってdivの配列をhtmlファイルに埋め込む

Question

私は16 div要素を含むコンテナをお互いに積み重ねています。私は表示されたdiv要素の数を1ページあたり4つに制限し、コンテンツの下に改ページを表示したいと思います。新しいdiv要素が将来htmlファイルに追加されるので、ページ番号に新しい数値が設定されますが、ページあたりの表示要素数は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; 

私は示そうとHI display：noneプロパティを持つcssクラスを使用する要素。私は半分そこにいるようだが、ボタンをクリックするとまだ要素が台無しになっていて、ただ消えるだけだ。

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