条件分页javascript

Question

我的问题是当我 Select 第 2 页时我想隐藏元素 0-4 并显示 5-8 但是当我点击 0-4 时不隐藏我的事情是因为我的 if 条件有人可以帮助我了解 if 条件吗？还是另一种方法？我可以在第一次加载时限制显示数据吗？

let data = Array.from(Array(15).keys()).map(item => ({ topic: `Header ${item}`, detail: `Detail ${item}`}))
  
  let tourlek = document.querySelector('#tourlek')
  let pagination = document.querySelector('#pagination')
  let itemPage = document.getElementsByTagName('item-page')

  let item = data.length
  let page = 1
  let limit = 4
  let limitFn = Math.ceil(item / limit)
  
  for (let i = 0; i < item; i++) {
    let div = document.createElement('div')
    div.textContent = `${data[i].topic} - ${data[i].detail}`
    div.classList = 'pd'
    tourlek.appendChild(div)
  }
  
  for (let i = page; i <= limitFn; i++){
    let a = document.createElement('a')
    a.textContent = `P:${page}`
  
    // addEventListener onPage function when click
    a.addEventListener('click', onPage)
  
    a.setAttribute('data-page', page)
    page = page + 1
  
    pagination.appendChild(a).href = 'javascript:void(0)'
  }
  
  function onPage (event) {
    let itemDom = document.querySelectorAll('.pd')
    let currentPage = event.target.getAttribute('data-page')
  
    for (let i = 0; i < itemDom.length; i++) {
      if (i >= limit * currentPage ) {
        itemDom[i].style.display = 'none'
//        console.log(0 < limit * currentPage )
      }  else {
        itemDom[i].style.display = ''
      }
    }
    console.log(event.target.getAttribute('data-page'))
  }

a {
      margin: 0 10px;
    }

<div>
    <div id="tourlek"></div>
    <div id="pagination"></div>
  </div>

Answer 1

要从第 1 页开始，只需执行

document.querySelector("[data-page='1']").click();

求范围

const lim = currentPage * limit 
for (let i = 0; i < itemDom.length; i++) {
  itemDom[i].hidden = i >  lim || i < lim -limit
}

let data = Array.from(Array(15).keys()).map(item => ({
  topic: `Header ${item}`,
  detail: `Detail ${item}`
}))

let tourlek = document.querySelector('#tourlek')
let pagination = document.querySelector('#pagination')
let itemPage = document.getElementsByTagName('item-page')
let currentPage = 1; 

let item = data.length
let page = 1
let limit = 4
let limitFn = Math.ceil(item / limit)
let lastPage = 1;

for (let i = 0; i < item; i++) {
  let div = document.createElement('div')
  div.textContent = `${data[i].topic} - ${data[i].detail}`
  div.classList = 'pd'
  tourlek.appendChild(div)
}
document.querySelector(".box").addEventListener("click", onPage)
for (let i = page; i <= limitFn; i++) {
  let a = document.createElement('a')
  a.textContent = `P:${page}`

  a.setAttribute('data-page', page)
  page = page + 1

  pagination.appendChild(a).href = 'javascript:void(0)'
}
document.querySelector("[data-page='1']").click();

function onPage(event) {
  const tgt = event.target;
  if (tgt.id === "arwL") {
    const p = currentPage - 1
    if (p===0) return
    document.querySelector(`[data-page='${p}']`).click()
    return;
  }
  if (tgt.id === "arwR") {
    const p = +currentPage + 1
    if (p>=data.length) return
    document.querySelector(`[data-page='${p}']`).click()
    return;
  }
  let itemDom = document.querySelectorAll('.pd')
  currentPage = event.target.dataset.page;
  const lim = currentPage * limit
  for (let i = 0; i < itemDom.length; i++) {
    itemDom[i].hidden = i > lim || i < lim - limit
  }
}

a {
  padding: 0 10px;
}

.box {
  display: flex;
}

#arwL,
#arwR {
  cursor: pointer
}

<div>
  <div id="tourlek"></div>
  <div class='box'>
    <div id="arwL">&lt;</div>
    <div id="pagination"></div>
    <div id="arwR">&gt;</div>
  </div>
</div>

条件分页javascript

Condition pagination javascript

javascript

pagination

if-statement