内容过滤和分页

Question

我有很多div元素使用纯JS分页分为三页。这样，div元素每页限制为四个。现在，我正在尝试使用普通css包含内容过滤器。它工作正常，但你必须转到下一页，看看那里过滤了什么。下一页和下一页......如何过滤掉所有div在彼此之下崩溃，但仍然限制为每页4个？

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;

#blue:checked~ :not(.blue) {
  display: none;
}

<input type="radio" id="blue" class="filter-input" name="filter" /><label for="blue" class="filter-label" onclick>Blue</label>

<div id="12" class="events-section__main-event blue"></div>
<div id="11" class="events-section__main-event blue"></div>
<div id="10" class="events-section__main-event"></div>
<div id="9" class="events-section__main-event"></div>
<div id="8" class="events-section__main-event blue"></div>
<div id="7" class="events-section__main-event"></div>
<div id="6" class="events-section__main-event blue"></div>
<div id="5" class="events-section__main-event blue"></div>
<div id="4" class="events-section__main-event"></div>
<div id="3" class="events-section__main-event blue"></div>
<div id="2" class="events-section__main-event"></div>
<div id="1" class="events-section__main-event blue"></div>