我需要在 JS 中创建一个 'See more pictures' 按钮

Question

我正在创建一个 gif 网站，它使用 GIPHY API。在这个网站中，我添加了一个“搜索栏”，您可以在其中输入您要查找的 GIF 类型，以及网站 returns 来自 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();
}

我想做的是创建一个 'see more' 函数：当您单击 'See more' 按钮时，限制会被修改，网络会向您显示另外 12 张 gif（加上最初搜索的前 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.
}

});

你会怎么做？

谢谢！

Answer 1

您可以尝试类似的方法，

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

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

Answer 2

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

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, "gifs", "search", 12, 0), currentQuery);
    inputSearch.value = "";
  }
})

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

我需要在 JS 中创建一个 'See more pictures' 按钮

I need to create a 'See more pictures' button in JS

javascript

image

search

giphy

giphy-api