我需要在 JS 中创建一个“查看更多图片”按钮

如何解决我需要在 JS 中创建一个“查看更多图片”按钮

我正在创建一个使用 GIPHY API 的 gif 网站。在这个网站中，我添加了一个“搜索栏”，您可以在其中输入您要寻找的 GIF 类型，网站会从 GIPHY 返回 12 个 GIF。

这是我的搜索功能：

async function buscarGifs(valorDeInput,tipoRequest1,tipoRequest2,limit,num){
let urlSearch = `https://api.giphy.com/v1/${tipoRequest1}/${tipoRequest2}?api_key=${apiKey}&q=${valorDeInput}&limit=${limit}&offset=${num}&rating=g&lang=es`;
    let response = await fetch(urlSearch);
    return response.json();
}

我试图做的是创建一个“查看更多”功能：当您单击“查看更多”按钮时，限制被修改，并且网络向您显示另外 12 个 gif（加上来自初始搜索）。

这就是我调用“buscarGifs”（gif 搜索）功能的方式：

inputSearch.addEventListener("keyup",(event)=>{
if(event.keyCode === 13){ //Activa búsqueda con enter.
    printSearch(buscarGifs(inputSearch.value,"gifs","search",1,0),inputSearch.value);//Busca en API e imprime en DOM.
inputSearch.value = ""; //Vaciar casilla de búsqueda.
}

});

你会怎么做？

谢谢！

解决方法

你可以尝试类似的东西，

showMoreBtn.addEventListener("click",() => { 
  printSearch(buscarGifs(inputSearch.value,"gifs","search",1,0),inputSearch.value);
  inputSearch.value = "";
}

相应地修改 limit 和 num 参数。我不确定你为什么首先使用 1 和 0 来获取前 12 条记录。

,

保存当前搜索查询、偏移量和总结果

let currentQuery,resultOffset,totalCount;

async function buscarGifs(valorDeInput,tipoRequest1,tipoRequest2,limit,num) {
  let urlSearch = `https://api.giphy.com/v1/${tipoRequest1}/${tipoRequest2}?api_key=${apiKey}&q=${valorDeInput}&limit=${limit}&offset=${num}&rating=g&lang=es`;
  let response = await fetch(urlSearch);
  let results = response.json();
  // update total results
  totalCount = results.pagination.total_count;
  // show hide more button
  if(resultOffset > totalCount){
    alert('no more results,remove more button');
  }
  return results;
}

inputSearch.addEventListener("keyup",(event) => {
  if (event.keyCode === 13) {
    currentQuery = inputSearch.value;
    // new search,reset to 0
    resultOffset = 0;
    printSearch(buscarGifs(currentQuery,12,currentQuery);
    inputSearch.value = "";
  }
})

// the more button
moreButton.addEventListener("click",(event) => {
  resultOffset += 12
  printSearch(buscarGifs(currentQuery,resultOffset),currentQuery);
})