Question

我的点击事件有问题

以下是最小代码。

我的过滤功能仅在页面加载时触发。

我想要实现的是当我点击<li>时使用'active'类。该函数应该运行并且 active li的值用作过滤器函数的参数，然后相应地过滤列表。

   

window.onload = listFilter();

const activePage = document.querySelector('.page-item.active');


activePage.addEventListener("click", function(e) {
  e.preventDefault();
  console.log("Clicky");
  listFilter();
});

function listFilter() {
  const list = document.querySelectorAll( '.resultsItem' );
  const items = [...list];
  console.log(items);
  const itemsPerPage = 5;

  const currentPgVal = parseInt(document.querySelector('.page-item.active a').textContent);
  let rangeMax = (currentPgVal) * Number(itemsPerPage) - 1;
  let rangeMin = (rangeMax - Number(itemsPerPage)) + 1;

  for(let item in items) {
    if(item <= rangeMax && item >= rangeMin ) {
     items[item].classList.remove("hidden");
    }else {
     items[item].classList.add("hidden");
    }
  }
}

 
  .hidden {
  display: none;
}

   
 <div class="list" id="resultsList">
  <div class="resultsItem">
    <p>Item 1</p>
  </div>
  <div class="resultsItem">
    <p>Item 2</p>
  </div>
  <div class="resultsItem">
    <p>Item 3</p>
  </div>
  <div class="resultsItem">
    <p>Item 4</p>
  </div>
  <div class="resultsItem">
    <p>Item 5</p>
  </div>
  <div class="resultsItem">
    <p>Item 6</p>
  </div>
  <div class="resultsItem">
    <p>Item 7</p>
  </div>
  <div class="resultsItem">
    <p>Item 8</p>
  </div>
  <div class="resultsItem">
    <p>Item 9</p>
  </div>
  <div class="resultsItem">
    <p>Item 10</p>
  </div>
 
</div>
        
  <ul class="paginatorList">
  <li class="page-item previous"><a onclick="createPagination(pages, 1)">&lt;</a></li>
  <li class="page-item"><a onclick="createPagination(pages, 1)">1</a></li>
  <li class="page-item active"><a onclick="createPagination(pages, 2)">2</a></li>
  </ul>

Answer 1

做了一些检查，@ epascarello指出我已经有了Onclick功能。所以我只是调用了我的过滤器功能，我的过滤器效果很好！

因此，快速概述一下：

function createPagination(pages, page) {
  some code
  listFilter();
  return code;
}

function listFilter() {
  code code code
}

Click事件未触发我的过滤功能

1 个答案: