让 gif 出现在按钮点击上答案

【问题标题】：Make gifs appear on a button click让 gif 出现在按钮点击上
【发布时间】：2018-09-11 05:18:50
【问题描述】：

我正在尝试制作一个包含“主题”数组的页面。每个主题都有一个按钮，按下时，页面上会显示有关该主题的 GIF。用户还可以输入自己的主题来创建按钮并获取更多 gif。我正在使用 giphy API。

我不知道如何在单击按钮时显示 gif。我设法在页面上获得了 gif，但我不知道它们来自哪里，因为它们与我的主题无关。我什至不确定我的主题是否被使用。我已经尝试了几个小时来解决这个问题，我真的很困惑我缺少什么来移动它。任何建议都非常感谢

HTML

      <!DOCTYPE html>
    <html>
        <head>
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
                crossorigin="anonymous">
            <link rel="stylesheet" type="text/css" href="assets/style.css">

            <title>Gif Tastic</title>
        </head>

        <body>
            <div id="buttons"></div> 
            <div id="search"></div>
            <div id="gifs"></div>

             <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <script src="assets/javascript.js"></script>
        </body>
    </html>

JAVASCRIPT

    $(document).ready(function() {
  var topics = [
    "cartoons",
    "mma",
    "dinosaur",
    "mexico",
    "monster",
    "muay thai",
    "mafia",
    "guitar"
  ];

  // Topic Buttons
  function createBtn() {}

  // Gifs
  function displayGifs() {
    var topic = $(this).attr("data-name");
    var queryUrl =
      "http://api.giphy.com/v1/gifs/search?q=" +
      btn +
      "&limit=10&api_key=pbQIp7jgT1wgUdEAxUYByhoM1KKnBzIU";
    var apiKey = "pbQIp7jgT1wgUdEAxUYByhoM1KKnBzIU";

    for (var i = 0; i < topics.length; i++) {
      var btn = $("<button>" + topics[i] + "</button>");
      btn.addClass("jsonData");
      btn.attr("data-name", topics[i]);
      btn.appendTo("#buttons");
      $("btn").on("click", function() {
        //displayGifs();
        //console.log("data-name");
      });
    }

    $.ajax({
      url: queryUrl,
      method: "GET"
    }).then(function(response) {
      if (response.data.length > 1) {
        for (var i = 1; i < 9; i++) {
          var result = response.data;
          var img = $("<img>");
          var imgUrl = result[i].images.original.url;
          img.attr("src", imgUrl);
          $("#gifs").append(img);
        }
      }
    });
  }

  displayGifs();
  createBtn();
});

【问题讨论】：

您在错误的位置创建了您的 queryURL。 btn 甚至没有定义，这就是为什么您显示的 GIF 没有意义。如果您搜索“q=undefined”，您将获得完全相同的 GIF。您需要在按钮单击时动态创建它，以便您可以使用按钮的值作为查询。另外，请在解决此问题后更改您的 API 密钥，否则您将打破每日限制，直到您被 giphy 禁止。
小贴士：请尽量写一个更中肯的问题标题。这有助于将来有类似问题的其他人找到此问题并使用给出的答案。
题名有那么难吗？ @Linus
是的，因为那是 OP 的工作。

标签： javascript jquery json giphy-api

【解决方案1】：

您的 API 调用中似乎有一个小错字，它应该引用 topic 而不是 btn，如下所示：

var queryUrl =
      "http://api.giphy.com/v1/gifs/search?q=" +
      topic +
      "&limit=10&api_key=pbQIp7jgT1wgUdEAxUYByhoM1KKnBzIU";

我希望这会有所帮助。

【讨论】：

【解决方案2】：

您正在 $(document).ready() 中创建按钮。所以你不能在 $(document).ready() 中访问 $("#btn")。这就是您的 btn 点击事件未注册的原因。因此，如下更改您的代码。这将注册按钮点击事件。

   for (var i = 0; i < topics.length; i++) {
     var btn = $("<button>" + topics[i] + "</button>");
     btn.addClass("jsonData");
     btn.attr("data-name", topics[i]);
     btn.attr("onclick", "displayGifs('"+topics[i]+"')");
     btn.appendTo("#buttons");
   }

我稍微更改了您的代码。变化是 1.将按钮点击事件附加到按钮 2. 将topic作为输入参数发送给btn click函数。

$(document).ready(function() {
    createBtn();
     })
   
     // Topic Buttons
     function createBtn() {
      var topics = [
       "cartoons",
       "mma",
       "dinosaur",
       "mexico",
       "monster",
       "muay thai",
       "mafia",
       "guitar"
     ];
     
       for (var i = 0; i < topics.length; i++) {
         var btn = $("<button>" + topics[i] + "</button>");
         btn.addClass("jsonData");
         btn.attr("data-name", topics[i]);
         btn.attr("onclick", "displayGifs('"+topics[i]+"')");
         btn.appendTo("#buttons");
       }
   }
     // Gifs
     function displayGifs(topic) {
    //    var topic = $(this).attr("data-name");
       var queryUrl =
         "http://api.giphy.com/v1/gifs/search?q=" +
       topic
         "&limit=10&api_key=pbQIp7jgT1wgUdEAxUYByhoM1KKnBzIU";
       var apiKey = "pbQIp7jgT1wgUdEAxUYByhoM1KKnBzIU";
   
     
       $.ajax({
         url: queryUrl,
         method: "GET"
       }).then(function(response) {
         if (response.data.length > 1) {
           for (var i = 1; i < 9; i++) {
             var result = response.data;
             var img = $("<img>");
             var imgUrl = result[i].images.original.url;
             img.attr("src", imgUrl);
             $("#gifs").append(img);
           }
         }
       });
     }

  <!DOCTYPE html>
    <html>
        <head>
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
                crossorigin="anonymous">
            <link rel="stylesheet" type="text/css" href="assets/style.css">

            <title>Gif Tastic</title>
        </head>

        <body>
            <div id="buttons"></div> 
            <div id="search"></div>
            <div id="gifs"></div>

             <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <script src="assets/javascript.js"></script>
        </body>
    </html>

【讨论】：