jsonから静的なsrcを取得します。未定義です

Question

2つの画像を表示するオーバーレイを作成しようとしています。画像srcは次のようになりますJSONファイルに格納されています。私はボタンをクリックしたときに

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

、オーバーレイが開くと、2 <img>秒にSRCを追加することになっています。しかし私が得るのはsrc(undefined)です。

$(".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 
}); 

は、私は別の非常にシンプルなものを構築するために、この非常に構造を使用しました：私のjqueryのクリック機能は、（私は/開閉するオーバーレイのためのすべてのロジックをオフに残してきた）、このようになります

プロジェクトとそれは正常に働いた。私は何が起こっているのか分からない。

オーバーレイが隠されているためですか？任意のヒントやヘルプは非常に高く評価されています:)

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