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

Question

::更新代码::

我从数组动态生成了按钮。单击按钮时，10 张静态 gif 图像会通过 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 元素的属性。像这样的东西:

`killerImg.attr("data-gif", gif);`

正如您已经定义的那样 var gif = respData.images.fixed_height_small.url;。您可能还想给它一个唯一的 ID，例如: killerImg.attr("id", "killer-img");

然后，在单击事件中，您可以从元素本身检索该属性:

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

并用 img src 将其切换为:

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

最后:

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

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