Question

我正在制作一个gif生成器，目标是动态创建可点击按钮，然后从搜索词中动态添加10个gif到页面。单击时返回控制台日志，但不会向页面添加带有gif图像和评级的div。

HTML

<form id="killer-form">
    <label for="killer-input">Add a serial killer:</label>
    <input type="text" id="killer-input"><br>
    <input id="killer-add-submit" type="submit" value="Submit">
</form>

<div id="append-img-div"></div>

JS

var killersGifs = {

    killerSearches: ["Freddy", "Jason", "Pennywise", "Ghost Face", "American Mary", "Chucky", "Bride of Chucky", "Candyman", "Cujo", "Hannibal", "Leatherface", "Michael Meyers", "Norman Bates", "Pinhead"],

    buttonLoop: function() {
        for (var b = 0; b < killersGifs.killerSearches.length - 1; b++) {
            var buttonM = $("<button class='dynGen'>").text(killersGifs.killerSearches[b]).attr("data-index", killersGifs.killerSearches[b]);
            $("#buttons").append(buttonM);
        }
    },

    divLoop: function(event) {
        for (var i = 0; i < killersGifs.killerSearches.length - 1; i++) {
            //console.log(this.killerSearches[i]);
            //var newDiv = $("<div class='gif-div'>");
            var killer = killersGifs.killerSearches[i];
            var queryURL = "https://api.giphy.com/v1/gifs/search?api_key=B26sstJns2pZuNT5HiJpqS5FV8Su1sDd&q=" + killer + "&limit=10"


            //console.log(queryURL);
            $.ajax({
                url: queryURL,
                method: "GET"
            }).done(function(response) {
              console.log(response);
                for (var x = 0; x < response.length - 1; x++) {

                    var respData = response[x].data;
                    var image = respData.images.fixed_height_small_still.url;
                    var rating = respData.rating;

                    var dynDiv = $("<div class='dyn-div'>");
                    var killerImg = $("<img>");

                    killerImg.attr("src", image);
                    killerImg.attr("alt", "Serial Killer still frame of gif");

                    dynDiv.append("Rating: " + rating);
                    dynDiv.append(image);


                    $("#append-img-div").prepend(dynDiv);

                };

            });

        };
    },

    userPush: function () {
        var userInput = $("input[type='text']").val().trim();
        console.log(userInput);
        killersGifs.killerSearches.push(userInput);
        var buttonU = $("<button class='dynGen'>").text(userInput).attr("data-index", userInput);
        $("#buttons").append(buttonU);
        console.log(killersGifs.killerSearches);
    }

};

killersGifs.buttonLoop();

$("#killer-add-submit").on("click", function(event) {
    event.preventDefault();
    killersGifs.userPush();
   });

$(document).on("click", "button.dynGen", function(event) {
    event.preventDefault();
    $("#append-img-div").empty();
    killersGifs.divLoop(event);
});

单击按钮应返回与该单词相关的10个图像（仍然是GIF）。

console.log在点击时运行，但它是控制台记录所有13个单词的数组10，而不是单击单词的一个数组。

Answer 1

response是一个对象。

response.length未定义。

response.data是一个数组。

如果您还想要图片，那么您还应该附加killerImg。

＆＃13;

var killersGifs = {

  killerSearches: ["Freddy", "Jason", "Pennywise", "Ghost Face", "American Mary", "Chucky", "Bride of Chucky", "Candyman", "Cujo", "Hannibal", "Leatherface", "Michael Meyers", "Norman Bates", "Pinhead"],

  buttonLoop: function() {
    for (var b = 0; b < killersGifs.killerSearches.length - 1; b++) {
      var buttonM = $("<button class='dynGen'>").text(killersGifs.killerSearches[b]).attr("data-index", killersGifs.killerSearches[b]);
      $("#buttons").append(buttonM);
    }
  },

  divLoop: function(event) {
    for (var i = 0; i < killersGifs.killerSearches.length - 1; i++) {
      //console.log(this.killerSearches[i]);
      //var newDiv = $("<div class='gif-div'>");
      var queryURL = "https://api.giphy.com/v1/gifs/search?api_key=B26sstJns2pZuNT5HiJpqS5FV8Su1sDd&q=" + killer + "&limit=10"

      var killer = killersGifs.killerSearches[i];
      //console.log(queryURL);
      $.ajax({
        url: queryURL,
        method: "GET"
      }).done(function(response) {
//            console.log(response.data.length);
        for (var x = 0; x < response.data.length - 1; x++) {
          var respData = response.data[x];
          var image = respData.images.fixed_height_small_still.url;
          var rating = respData.rating;

          var dynDiv = $("<div class='dyn-div'></div>");
          var killerImg = $("<img>");

          killerImg.attr("src", image);
          killerImg.attr("alt", "Serial Killer still frame of gif");

          dynDiv.append("Rating: " + rating);
          dynDiv.append(image);


          $("#append-img-div").prepend($(dynDiv).append($(killerImg)));

        };

      });

    };
  },

  userPush: function() {
    var userInput = $("input[type='text']").val().trim();
    console.log(userInput);
    killersGifs.killerSearches.push(userInput);
    console.log(killersGifs.killerSearches);
  }

};

killersGifs.buttonLoop();

$("#killer-add-submit").on("click", function(event) {
  event.preventDefault();
  killersGifs.userPush();
});

$(document).on("click", "button.dynGen", function(event) {
  event.preventDefault();
  $("#append-img-div").empty();
  killersGifs.divLoop(event);
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

<div id="buttons"></div>

<form id="killer-form">
  <label for="killer-input">Add a serial killer:</label>
  <input type="text" id="killer-input"><br>
  <input id="killer-add-submit" type="submit" value="Submit">
</form>

<div id="append-img-div"></div>

＆＃13;

.on（“click”）不附加到HTML

1 个答案: