Блог

Я просматриваю документы в массиве, но использую разбиение на страницы Мангуста, чтобы сначала ограничить первые 20 записей, а затем добавлять следующие 20 записей каждый раз, когда нажимается кнопка «Показать больше».

 <% thoughts.docs.forEach(function(thought, i) { %>
    <div class="square-box-container">
        <div class="pyp-image-container">
            <div class="image-overlay">
 

Я использую приведенную ниже функцию для отображения наложения на определенную запись, когда пользователь нажимает на нее:

 function showOverlay() {

  let containerItems = document.getElementsByClassName("square-box-container");
  let overlayItems = document.getElementsByClassName("image-overlay");

  for (let i = 0; i < containerItems.length; i   ) {
      containerItems[i].onclick = function() {
          if (overlayItems[i].style.display == 'block') {
            overlayItems[i].style.display = 'none';
          } else {
            overlayItems[i].style.display = 'block';
          }
      }
  }
}

showOverlay();
 

Сама разбивка на страницы работает нормально, но функция работает только на первой странице (т. Е. Первые 20 записей); когда я загружаю следующие 20 записей, а затем нажимаю на одну, чтобы отобразить наложение, она не работает.

Я предполагаю, что это связано с тем, что при первоначальной загрузке страницы в списке отображается только 20 элементов контейнера из-за разбиения на страницы. Как я могу гарантировать, что функция либо а) просматривает все элементы контейнера во всем списке с самого начала, либо б) обновляется при загрузке каждой страницы, чтобы также учитывать новые записи (я предполагаю, что этот параметр будет более упрощен)?