0

我正在尝试制作一个包含一系列“主题”的页面。每个主题都有一个按钮，按下时，页面上会显示有关该主题的 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();
});
4

2 回答 2

1

看起来您的 API 调用中有一个小错字，它应该引用topic而不是btn这样：

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

我希望这有帮助。

于 2018-04-01T23:49:31.437 回答
0

您正在 $(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. 将主题作为输入参数发送到 btn 单击函数。

$(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>

于 2018-04-02T00:15:32.137 回答