條件分頁javascript

我的問題是當我選擇第 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>

uj5u.com熱心網友回復：

要從第 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 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)'
}
document.querySelector("[data-page='1']").click();

function onPage(event) {
  let itemDom = document.querySelectorAll('.pd')
  let 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 {
  margin: 0 10px;
}

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

標籤：javascript if 语句 分页

上一篇：使用比較運算子比較C 中的兩個字符陣列

下一篇：根據條件獲取非na日期的差異