JavaScript >> Javascript 文檔 >  >> JavaScript

如何在 JavaScript 中對數組進行分頁

我想在 JavaScript 中獲取一組 URL,並能夠通過單擊上一個和下一個按鈕來分頁到正確的一個。

這是 HTML 代碼。

<button id="behind"></button> <button id="forward"></button>

還有 JavaScript,根據這個 StackOverflow 帖子的答案修改。

var host = 'https://' + document.location.hostname
var pages = [host + '/index.html', host + '/index2.html', host + '/index3.html']

var behind = document.getElementById('behind')
var forward = document.getElementById('forward')

function prev(current, pages) {
  var index = pages.indexOf(current)
  if (index === 0) {
    return pages[pages.length - 1]
  }
  return pages[index - 1]
}

function next(current, pages) {
  var index = pages.indexOf(current)
  if (index === pages.length - 1) {
    return pages[0]
  }
  return pages[index + 1]
}

behind.addEventListener('click', function () {
  var newUrl = prev(host + window.location.pathname, pages)
  window.location.href = newUrl
})

forward.addEventListener('click', function () {
  var newUrl = next(host + window.location.pathname, pages)
  window.location.href = newUrl
})

Tutorial JavaScript 教程
  1. 發現高分辨率時間 API

  2. 單體與微前端

  3. 延遲腳本以加快渲染速度

  4. Twitter Bot - Vue 3 更新

  5. 帶有 Svelte 和 Node 的全棧應用程序

  6. 做錯事

  7. 在 JavaScript 中創建一個需要的參數

  1. 🚀 GitHub 上面向 Web 開發人員的 10 個熱門項目 - 2020 年 5 月 30 日

  2. Vercel 的無服務器函數

  3. Vue 儀表板 - 開源且免費

  4. 你學習前端錯了。

  5. Javascript 提示

  6. 如何在 JavaScript 中找出調用者函數?

  7. JS Playground 更新

  1. 重新實現 Facebook 的反應動畫

  2. 在表格中顯示表單詳細信息。

  3. # 箭頭函數 VS 常規函數(函數中 this 的作用域)

  4. 什麼是 JSON