Question

我正在尝试创建一个包含“主题”数组的页面。每个主题都有一个按钮，按下时，页面上会出现有关该主题的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();
});

Answer 1

您的API调用看起来有一个小错误，它应该引用topic而不是btn，如下所示：

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

我希望这会有所帮助。

Answer 2

您正在$（document）.ready（）中创建按钮。所以你不能在$（document）.ready（）中访问$（＆＃34;＃btn＆＃34;）。这就是为什么你的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.将主题作为输入参数发送到btn点击功能。

＆＃13;

$(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);
           }
         }
       });
     }

＆＃13;

  <!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>

＆＃13;

单击按钮时显示GIF

2 个答案: