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