使用JS

Question

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

HTML中的按钮（我不包括div元素，它们像我说的那样是16，并带有＆＃34; .events-section__main-event＆＃34;的类名称）：

<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类来显示和隐藏元素。似乎我在那里的一半，但是当点击按钮时，元素仍然混乱，它们就会消失。

Answer 1

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

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