jquery API請求錯誤/不會顯示giphy的

Question

我無法弄清楚我的代碼出了什麼問題，以及爲什麼我的API/AJAX調用不會顯示我要調用的圖像。它出現在我console.log（結果）10個圖像被調用，但他們不會顯示。這裏是我的jQuery代碼.. //當窗口加載...功能會發生 的window.onload =函數（）{

var musiciansList = []; 
var inputBox = $('#submitButton') 

//whatever musician the user submits will appear 
$('#submitButton').on('click', function(){ 
    var input=$('#submitButton'); 
    var userInput=inputBox.val(); 
    musiciansList.push(userInput); 
    renderButtons(); 
}); 

function renderButtons() { 
     var button = $('<button>'); 
     button.text(musiciansList[musiciansList.length-1]); 
     button.addClass('band') 
     $('.container').append(button); 

}; 

//When I click this button a function will happen 
$(document).on('click', '.band', function() { 

//variable queryUrl for giphy 
var queryUrl = "http://api.giphy.com/v1/gifs/search?q=music&api_key=dc6zaTOxFJmzC&limit=10"; 

    //requesting information giphy 
    $.ajax({ 
     url: queryUrl, 
     method: 'GET' 
    })//recieving information from giphy 
    .done(function(response) {  
     //returns the response from the website 
     var results = response.data; 
     var imageUrl = response.data.image_original_url; 
     var musicians = $('<img>');   
     console.log(queryUrl) 

     //takes var musicians and adds attr src and imageUrl 
     musicians.attr('src', imageUrl); 
     musicians.attr('alt', 'musician'); 
     $("#images").push(imageUrl) 

     //prepend puts the images in the beginning 
     $("#images").prepend(imageUrl); 
     $('<img>').val(); 
     console.log(results) 
     console.log(imageUrl) 


     //empty gifs button 
     $('#clearButton').click(function(event){ 
      $(musicians).remove() 

     }); 
    }); 
}); 

};

Answer 1

所以它看起來像你有幾個錯誤。

第一個看起來像你使用的giphy API。如果您在瀏覽器中訪問http://api.giphy.com/v1/gifs/search?q=music&api_key=dc6zaTOxFJmzC&limit=10，則可以看到數據如何返回。數據以GIF對象數組的形式返回，每個GIF對象都有一個「圖像」屬性，可以從中選擇各種圖像。相反，像訪問

var imageUrl = response.data.image_original_url; 

圖像的您通過response.data陣列需要循環並拖拽圖像，如下面的例子

var imageUrl = response.data[i].images.fixed_height.url; 

你的另一個問題是附加的圖像元素時，你創建到DOM。您正在追加imageUrl變量（它只是圖像URL的值），而不是您創建的存儲在音樂人變量中的img元素（這也將是您循環的一部分）。此外，以下內容：

$("#images").push(imageUrl) 

//prepend puts the images in the beginning 
$("#images").prepend(imageUrl); 
$('<img>').val(); 

都可以重構爲單行

$("#images").prepend(musicians); 

你的最終結果應該是這個樣子：

for(var i = 0; i < response.data.length; i++){ 
     var imageUrl = response.data[i].images.fixed_height.url; 
     var musicians = $('<img>');   

     //takes var musicians and adds attr src and imageUrl 
     musicians.attr('src', imageUrl); 
     musicians.attr('alt', 'musician'); 

     //prepend puts the images in the beginning 
     $("#images").prepend(musicians); 
    }