时间戳

首页 > 解决方案 > 每页最多存储 6 张卡片

javascript - 每页最多存储 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);
        
    }
  });

});

标签： javascripthtmljquery

解决方案

将您的 API 网址更改为：

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

资料来源：文档

推荐阅读