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

Question

::更新代码::

我从一个数组中动态生成了按钮。单击按钮时，来自 API 调用的 10 个静态 gif 图像会附加到页面。单击动态生成的静止图像之一时，我需要显示动画 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。

我最近自己处理了一个非常相似的任务。希望这会有所帮助！

Answer 2

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_still.url;
        var gif = respData.images.fixed_height.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);
        killerImg.attr("data-img", image);



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


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

    });


  },
    userPush: function () {
        var userInput = $("input[type='text']").val().trim();
        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");
    //killersGifs.animateGif();
    var currentIn = $(this).attr("data-index");
    var tempUrl = $(this).attr("data-gif");
    var tempUrl2 = $(this).attr("data-img");
    console.log(currentIn);
    console.log(tempUrl);
    if ($(this).attr("src") == tempUrl2) {
        $(this).attr("src", tempUrl);
    }
    else if ($(this).attr("src") == tempUrl) {
        $(this).attr("src", tempUrl2);
    };
});