Question

我的Giphy API调用成功但现在我正在尝试显示所有图像，而不仅仅是第一个。我确定这里需要一个循环，但我不确定如何/何时实现这一点。请参阅下面的HTML＆amp; jQuery代码。提前感谢您的时间！

HTML

<h1>WEB 230 Final - Github Giphy API Search</h1>

    <div class="outerWrapper">
      <p>Please record your query in the input box, select a rating from the drop down menu, and press the search button to view results.</p>

        <form>
          <input type="text" id="userQuery" value="Input your query here.">
          <label>
            <p>Rating:</p>
            <select id="rating">
              <option value="" selected>all</option>
              <option value="y">y</option>
              <option value="g">g</option>
              <option value="pg">pg</option>
              <option value="pg-13">pg-13</option>
              <option value="r">r</option>
            </select>
          </label>
          <br>
          <br>
          <button type="submit" id="searchButton">Search</button>
          <br>
          <br>
          <input type="reset" id="resetButton" value="Reset">
        </form>

        <div>
          <img id="searchResults" src=""/>
        </div>
    </div>

JS

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script type="text/javascript">

      // Allows page to load prior to running jQuery code.
      $( document ).ready(function(){

        // Ques function to run once searchButton is clicked.
        $('#searchButton').on('click', function(){

          // Start to construct URL that will actually be utilized in the funtion by making individual variables (some of which are dynamic) that define the search criteria.
          var api = 'http://api.giphy.com/v1/gifs/search?q=';

          // Assign variable for userQuery so it can be dynamically applied to the url.
          var userInput = $('#userQuery').val().trim();
            // Convert input for a sucessful API call.
            userInput = userInput.replace(/ /g, "+");

          // Set limit for maximum amount of search results displayed on one page.
          var limit = '&limit=24';
/*
          // Assign variable for userRating so it can be dynamically applied to the url.
          var rating = $('#rating').val().trim();
            // Convert input for a sucessful API call.
            rating = userRnput.replace(/ /g, "+");
*/
          // API public key.
          var key = '&api_key=dc6zaTOxFJmzC';

          // Create new variable called queryURL which pieces together all of the above variables.
          var queryURL = api + userInput + key + limit /*+ rating */;

           // Part 2 - Use AJAX to call GIPHY API (note that the .done() function waits for the API to respond)
          $.ajax({url: queryURL, method: 'GET'}).done(function(response){

            // This is the API response data. It's a JSON object of 24 gifs
            console.log(response.data);

            // For simplicity, we will take the first gif (ie. at postion 0)
            var giphyURL = response.data[0].images.fixed_height.url;
            console.log(giphyURL)

            // Plug image into html.
            $('#searchResults').attr('src', giphyURL);

          });

          // Part 3 - Clear the Gif using the reset_button id (#)
          $('#resetButton').on('click', function(){
            // Grab the img using the id and change the src to empty to remove the image
            $('#searchResults').attr("src",'');
          })

          // If using a jQuery click listner on a Submit button, you need to return false to prevent the default page refresh
          return false;
        })
        
      });

    </script>

Answer 1

因此，对于您的javascript，请记住数组有一个名为.length的方法。这将返回一个等于数组中元素数的数字。所以考虑一下这个数组：

var arrayStr = ["elem1", "elem2", "elem3"];

如果您运行以下代码：

var x = arrayStr.length;

然后x将等于3.我们如何在循环中使用它？

for (var i = 0, i < arrayStr.length, i++) {
    console.log(arrayStr[i]);
}

库里欧！现在我们知道如何遍历数组。考虑giphy api返回的对象。你显然已经知道如何获得第一个gif的网址了。我们会使用这样的循环：

for (var i = 0, i < response.data.length; i++) {
    var giphyURL = response.data[i].images.fixed_height.url;
    var newImg = $("<img>");
    newImg.attr("src", giphyURL);
    $("#searchResults").append(newImg);
}

显然你需要稍微改善页面，但至少在这里你有一个起点。希望能帮助到你。 ^ _ ^

如何显示所有Giphy API搜索结果图像？

1 个答案: