每頁最多存盤6張卡片

我正在制作一個 pokedex API。我現在可以按名稱或型別加載所有卡片。但是代碼會加載到一頁的所有卡片中。我想最多存盤 6 張卡片，然后它們會在新頁面上繼續。但我找不到如何做到這一點，所以如果有人有想法讓我知道！

JS：

$(document).ready(function (e) {

$("#TheSubmitButton").on("click", function(event){

  $("#card-container").empty();
  event.preventDefault();
  var pokemon = $("#searchInput").val().trim();

  $.ajax({
    method: "GET",
    url: "https://api.pokemontcg.io/v2/cards?q=name:"   pokemon

  }).then(function(response){
    for (var i = 0; i < response.data.length; i  ) {

      var pokeTainer = $("<div class='poketainer'></div>");

      var pokemonName = $("<div></div>");
      pokemonName.text(response.data[i].name);
      pokeTainer.append(pokemonName);

      var pokemonCard = $("<img class='pkmn-card'>");
      pokemonCard.attr("src", response.data[i].images.small);
      pokeTainer.append(pokemonCard);
                  
      var pokemonEvolve = $("<div></div>");
      pokemonEvolve.text('Evolves to: '   response.data[i].evolvesTo);
      pokeTainer.append(pokemonEvolve);
                  
      var pokemonFlavor = $("<div></div>");
      pokemonFlavor.text(response.data[i].flavorText);
      pokeTainer.append(pokemonFlavor);

      var pokemonTypes = $("<div></div>");
      pokemonTypes.text(response.data[i].types);
      pokeTainer.append(pokemonTypes);
                  
      $("#card-container").append(pokeTainer);
        
    }
  });

});

uj5u.com熱心網友回復：

這是一個非常基本的片段（包括分頁）：

const page = document.getElementById('card-container')

// the funcftion that fetches data from the API
const fetchData = ({
  name,
  pageNumber
}) => {
  return fetch(`https://api.pokemontcg.io/v2/cards?q=name:${name}&page=${pageNumber}&pageSize=6`)
}

// constructing the HTML, based on the
// JSON returned from the API
const pageHtml = ({
  data
}) => {
  let html = ''
  data.forEach(pokemon => {
    html  = '<div>'
    html  = `<div>${pokemon.name}</div>`
    html  = `<div><img src="${pokemon.images.small}" /></div>`
    if (pokemon.evolvesTo) {
      html  = `<div>Evolves to: ${pokemon.evolvesTo}</div>`
    }
    if (pokemon.evolvesFrom) {
      html  = `<div>Evolves from: ${pokemon.evolvesFrom}</div>`
    }
    html  = `<div>${pokemon.flavorText}</div>`
    html  = `<div>${pokemon.types}</div>`
    html  = '</div><hr />'
  })
  return html
}

// the update function:
// fetching & then updating the view
const updatePage = (searchObj) => {
  fetchData({ ...searchObj
    })
    .then(resp => resp.json())
    .then(json => {
      page.innerHTML = pageHtml(json)
    })
}

// basic search parameters
let searchObj = {
  name: '',
  pageNumber: 1,
}

jQuery(document).ready(function($) {

  // updating the name search parameter
  $('#searchInput').on('input', function(e) {
    searchObj = {
      ...searchObj,
      name: $(this).val().trim()
    }
  })

  // submitting the query, based on the current
  // search parameters
  $('#TheSubmitButton').on('click', function(e) {
    updatePage(searchObj)
  })

  // previous page
  // NOT PROTECTED FROM overflow
  $('#prevPage').on('click', function() {
    searchObj = {
      ...searchObj,
      pageNumber: searchObj.pageNumber - 1
    }

    updatePage(searchObj)
  })
 
  // next page
  // NOT PROTECTED FROM overflow
  $('#nextPage').on('click', function() {
    searchObj = {
      ...searchObj,
      pageNumber: searchObj.pageNumber   1
    }

    updatePage(searchObj)
  })
  
})

.pagination {
  display: flex;
  width: 30%;
  justify-content: space-between;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input id="searchInput" type="text" placeholder="POKEMON NAME" /><br />
  <button id="TheSubmitButton">SEARCH</button>
</div>
<div class="pagination">
  <button id="prevPage">PREV</button>
  <button id="nextPage">NEXT</button>
</div>
<hr />
<div id="card-container"></div>

• 搜索引數都保存在一個引數物件（這樣就可以很容易地將其擴展到maxNumPages，hasPrev，hasNext等等）
• 提取函式已提取，因此您只需傳入引數并獲取資料
• HTML 是在單獨的函式中創建的（如模板，您可以輕松修改）
• 分頁（上一頁，下一頁）不正常，因為它允許在第一頁之前或最后一頁之后

uj5u.com熱心網友回復：

將您的 API 網址更改為：

url: "https://api.pokemontcg.io/v2/cards?q=name:"   pokemon   "&page="   pageNumber   "&pageSize=6" 

來源：檔案

uj5u.com熱心網友回復：

將您的 API 資料存盤到 LocalStorage 并在用戶滾動時拉取資料以顯示在 UI 中。

或用頁面存盤物件陣列。前任：

[
   {
     page: 1,
     data: [ 6 records here.]
   },
   {
     page: 2,
     data: [ 6 records here.]
   }
]

然后在用戶滾動時顯示在 UI 上。

即 - 將 html 創建分離為不同的功能。

標籤：javascript html 查询

上一篇：為什么DBContext物件的生命周期很短

下一篇：如何在最后一個divimg到達后重新啟動此jQuery滑塊