giphy API呼び出し

Question

::更新されたコードから画像やGIFを切り替えるにはonclickの必要性::

私は動的配列からボタンを生成しています。ボタンをクリックすると、gifの10個の静止画像がAPI呼び出しからページに追加されます。動的に生成された静止画像の1つをクリックすると、アニメーション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

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); 
    }; 
}); 

Answer 2

私はあなたがjQueryで作成しているimg要素のプロパティとしてgif urlを設定する必要があると思います。ような何か：あなたはすでに var gif = respData.images.fixed_height_small.url;を定義されているよう

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

を見て。あなたはまた、のようなそれに一意のIDを与えたいと思うことがあります。 killerImg.attr("id", "killer-img");

次に、あなたのクリックイベントの中で、あなたが要素自体からその属性を取得することができます。

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

としてそれを切り替えます

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

、最終的には：：

とのIMG SRC

$("#killer-img").attr("src") = tempUrlイメージソースを移動中のgifに設定します。

私は最近、非常に似たような課題に取り組んでいます。お役に立てれば！