從json獲取靜態src返回undefined

Question

我正在嘗試構建一個顯示兩個圖像的覆蓋圖。圖像src存儲在一個JSON文件看起來像這樣：

{ 
    "items": [{ 
     "title": "Multimilionario", 
     "front": "http://placehold.it/810x2028?text=front", 
     "back": "http://placehold.it/810x2028?text=back" 
    }] 
} 

當我點擊一個按鈕，覆蓋打開，它應該在src追加兩個<img>秒。但我得到的是src(undefined)。

我的jQuery單擊功能看起來像這樣（我已經離開了所有的邏輯疊加打開/關閉）：

$(".js-overlay-start").unbind("click").bind("click", function(e) { 
    e.preventDefault(); 

    $.ajax({ 
     url: 'json/overlay.json', 
     type: 'get', 
     dataType: 'json', 
     success: function(data) { 
      var item = data.items; 
      console.log(item); 

      $('.json-front').attr("src", ""); 
      $('.json-back').attr("src", ""); 
      $('.json-front').attr("src", item.front); 
      $('.json-back').attr("src", item.back); 
     } //success 
    });//ajax 
}); 

我用這個非常的結構建立的東西在另一個很簡單項目，它工作得很好。我不確定發生了什麼事。

是因爲疊加層被隱藏了嗎？任何提示或幫助，非常感謝:)

Answer 1

您正在使用data.items像一個單一的對象，它是一個數組。

$(".js-overlay-start").unbind("click").bind("click", function(e) { 
    e.preventDefault(); 

    $.ajax({ 
     url: 'json/overlay.json', 
     type: 'get', 
     dataType: 'json', 
     success: function(data) { 
      var item = data.items[0]; 
      console.log(item); 

      $('.json-front').attr("src", ""); 
      $('.json-back').attr("src", ""); 
      $('.json-front').attr("src", item.front); 
      $('.json-back').attr("src", item.back); 
     } //success 
    });//ajax 
});