Question

我有一个CodePen，它使用基于用户输入调用GIF的GIPHY API。它工作，除了它只调用数组中的第一项。我意识到因为这是调用数组中的第一项。我尝试用i替换0并尝试使用for循环，但它不会进行调用。请注意我使用的是jQuery。

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <h1>GIF Search</h1>
    </div>
  </div><!-- END ROW-->

 <div class="row">
   <div class="col-sm-12 outerWrapper">

   <form>
     <input type="text" id="userQuery" value="" placeholder="">
     <br>
     <button class="btn" type="submit" id="searchButton">Search</button>


 <div class="row">
   <div class="col-md-4 col-sm-6">
     <div class="search-text"> 
     </div>

     <div class="img-container">
      <a class="img-link" target="_blank" href="#"><img id="searchResults" src="" /></a>
    </div><!-- END IMG-CONTAINER -->
  </div><!-- END COL -->

</div><!-- END ROW -->
  <a href=giphyURL onclick="redirect" target="_blank">Share</a>


</div><!-- END CONTAINER -->

JAVASCRIPT

$( document ).ready(function(){

// Construct the URL
$('#searchButton').on('click', function(e){
e.preventDefault();

var queryURL= "https://api.giphy.com/v1/gifs/search?q=" + $('#userQuery').val() +  "&api_key=dc6zaTOxFJmzC";

var limit = '&limit=24';
var q = $('#userQuery').val();

// Call API
$.ajax(
{
  type: 'GET',
  url: queryURL, 
  success:function(response){

  // This is the API response data. It's a   JSON object of 24 gifs 
  response.data.forEach(function() {
  var giphyURL = response.data[0].images.fixed_height.url;
  console.log(giphyURL);

  var imageResult = $('<img class=img-result src=' + giphyURL + ' />');
  imageResult.appendTo($('.img-container'));

 });

 $('.search-text').html('<p>Search result for ' + q + '</p>');

 }
});

})


});

Answer 1

这是更新的codepen https://codepen.io/anon/pen/dWRbaj

问题出现在foreach中，正在迭代的项目作为参数传递给您提供的回调函数。

HSHELL_REDRAW

无法循环通过Giphy API数组

1 个答案: