0

我是 jQuery 新手，我想弄清楚在输入关键字并单击“提交”后如何让多个 gif 显示在页面上。在我的 api 密钥中，我认为设置 'limit=10'（例如 10）的数字是假设每页有 10 个 gif？

$('#searchgifs').on('click', function() {
    var input = $('#search').val();
    $.get('https://api.giphy.com/v1/gifs/search?q=' + input + '&api_key=apikey&limit=10', function(response) {
      $('#img').html("<img src=" + response.data[0].images.downsized_large.url + ">")
    })
  });
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    
</head>
<body>
<input id="search" class="form-control mr-sm-2" type="text" placeholder="Search" value="">
<button class="btn btn-outline-success my-2 my-sm-0" id="searchgifs" type="submit">Search</button>
<div id="img">
    
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>   
<script src="scripts/script1.js"></script>
</body>
</html>

4

1 回答 1

1

看起来您有两个问题：第一个是您只将一个结果设置为元素，第二个是您将元素的内容设置为第一个结果的内容，而不是附加它。下面的代码段应该可以工作。

我做了两个改变：

  1. 使用 $.each() 函数通过使用数组键对所有结果而不是仅 1 执行某些操作
  2. 使用 .appendTo() 函数将内容添加到某个元素，而不是设置内容。第一个添加内容，后面覆盖当前值。

$('#searchgifs').on('click', function() {
    var input = $('#search').val();
    $.get('https://api.giphy.com/v1/gifs/search?q=' + input + '&api_key=apikey&limit=10', function(response) {
      $.each(response.data, function(index, gif){
      $("<img src=" + gif.images.downsized_large.url + ">").appendTo(('#img'))
      });
      
    })
  });
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    
</head>
<body>
<input id="search" class="form-control mr-sm-2" type="text" placeholder="Search" value="">
<button class="btn btn-outline-success my-2 my-sm-0" id="searchgifs" type="submit">Search</button>
<div id="img">
    
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>   
<script src="scripts/script1.js"></script>
</body>
</html>

于 2020-07-15T14:20:23.460 回答