0

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

https://codepen.io/anon/pen/wdewjL

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>');

 }
});

})


});
4

1 回答 1

2

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

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

let data = [1,2,3,4];
data.foreach(function(item){
   console.log(item);
})
于 2017-05-01T22:49:50.537 回答