Question

::更新代码::

我从数组动态生成按钮。单击按钮时，Gif的10个静止图像将从API调用附加到页面。当点击其中一个动态生成的静止图像时，我需要显示动画gif。再次点击，我需要显示静止图像和隐藏的动画GIF。

lastClick = [];

var killersGifs = {

killerSearches: ["Freddy Krueger", "Jason Voorhees", "Pennywise", "Ghostface", "American Mary", "Chucky", "Bride of Chucky", "The Candyman", "Cujo", "Hannibal", "Leatherface", "Michael Myers", "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(click) {
    var queryURL = "https://api.giphy.com/v1/gifs/search?api_key=B26sstJns2pZuNT5HiJpqS5FV8Su1sDd&q=" + lastClick + "&limit=10"

  $.ajax({
    url: queryURL,
    method: "GET"
  }).done(function(response) {
    console.log(response.data);

    for (var i = 0; i < response.data.length; i++) {
        var respData = response.data[i];
        var image = respData.images.fixed_height_small_still.url;
        var gif = respData.images.fixed_height_small.url;
        var rating = respData.rating;

        var dynDiv = $("<div class='dyn-div'>");
        //dynDiv.attr("data-index", i);

        var killerImg = $("<img class='still-image'>");

        killerImg.attr("src", image);
        killerImg.attr("alt", "Serial Killer still frame of gif");
        killerImg.attr("data-gif", gif);
        killerImg.attr("class", "killerImg");
        killerImg.attr("data-index", i);


        dynDiv.append("<p> Rating: " + rating + "</p>");
        dynDiv.append(killerImg);

        $("#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) {
    var currentIndex = $(this).attr("data-index");
    lastClick.push(currentIndex);
    console.log(currentIndex);
    event.preventDefault();
    $("#append-img-div").empty();
    killersGifs.divLoop();
    lastClick = [];
});

$(document).on("click", ".killerImg", function(event) {
    console.log("test");
    var currentIn = $(this).attr("data-index");
    var tempUrl = $(this).attr("data-gif");
    console.log(currentIn);
    console.log(tempUrl);
});

单击时，单击的图像应在静止图像和GIF动画之间切换。

单击功能控制台日志索引并更正单击图像的gif URL。我不知道如何在点击时交换gif和图像。

Answer 1

我认为您需要将gif url设置为您使用jQuery创建的img元素的属性。类似的东西：

docker run -it --name="pgtestcontainer" -v mydb:/var/lib/postgresql/data -e POSTGRES_PASSWORD=postgres -p 5432:5432 postgres:9.6.6

看你已定义的 `killerImg.attr("data-gif", gif);`。您可能还想给它一个唯一的ID，例如： var gif = respData.images.fixed_height_small.url;

然后，在您的on click事件中，您可以从元素本身检索该属性：

killerImg.attr("id", "killer-img");

并使用img src将其切换为：

var tempUrl = $("#killer-img").attr("data-gif");

最后：

$("#killer-img").attr("data-gif") = $("#killer-img").attr("src");将图像源设置为移动的gif。

我最近自己处理了一项非常类似的任务。希望这有帮助！

Answer 2

var sounds = [Audio("file1"), Audio("file2")]

需要onclick在giphy api调用之间切换图像和gif

2 个答案: