基於json文件的不同覆蓋內容

Question

我有一個覆蓋結構，我想通過jquery ajax獲取json文件的內容。疊加是由一類觸發：

<div class="js-overlay-start" data-overlay="js-overlay--type1"> 
    open overlay 
</div> 

這將觸發覆蓋，並打開HTML結構爲它看起來像這樣：

<div class="overlay" data-open-overlay="js-overlay--type1"> 
    <img class="json-front" src=""> 
    <img class="json-back" src=""> 
</div> 

它的JS是：

$(".js-overlay-start").unbind("click").bind("click", function(e) { 
    e.preventDefault(); 
    $("body,html").css("overflow","hidden").css("position","fixed"); 
    var dataOverlay = $(this).attr("data-overlay"); 
    $("body").find("[data-open-overlay='" + dataOverlay + "']").show(); 

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

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



    setTimeout(function() { 
     $(".overlay").addClass("o1"); 
    }, 100); 
}); 

和json文件看起來像這樣：

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

基本上我正在尋找一種方法來打開覆蓋和img src基於json中的title（或其他方式，如果它更方便）填充，所以它可以選擇適當的src s。當這個項目只有一個時，我很成功，但我不知道如何管理這個區別。

任何擡頭或解決方案非常感謝。非常感謝:)

Answer 1

如果您先創建ajax請求併爲點擊事件存儲數據（而不是爲每次點擊發出ajax請求），它可能會更有效。我沒有這樣做，因爲這不是你要求的，而是要考慮的事情。

下面我抓取了您的點擊的唯一標識符（即從data-overlay的type1），然後用它從您的json文件中選擇正確的對象。

$(".js-overlay-start").unbind("click").bind("click", function(e) { 
 
    e.preventDefault(); 
 
    $("body,html").css("overflow","hidden").css("position","fixed"); 
 
    var dataOverlay = $(this).attr("data-overlay"); 
 
    $("body").find("[data-open-overlay='" + dataOverlay + "']").show(); 
 
    var itemId = $(this).attr("data-overlay").split('--')[1]; // This is where you can grab the unique identifier 
 

 

 

 
    $.ajax({ 
 
     url: 'json/overlay.json', 
 
     type: 'get', 
 
     dataType: 'json', 
 
     success: function(data) { 
 
      $('.json-front').attr("src", ""); 
 
      $('.json-back').attr("src", ""); 
 
      $('.json-front').attr("src", data['items'][itemId].front); 
 
      $('.json-back').attr("src", data['items'][itemId].back); 
 
     } //success 
 
    });//ajax 
 

 

 

 
    setTimeout(function() { 
 
     $(".overlay").addClass("o1"); 
 
    }, 100); 
 
});

和你的JSON文件，以便更容易一些變化遍歷

{ items: { 
 
    \t type1: { 
 
     "title": "first", 
 
     "front": "http://placehold.it/810x2028?text=front", 
 
     "back": "http://placehold.it/810x2028?text=back" 
 
     }, 
 
    \t type2: { 
 
     "title": "second", 
 
     "front": "http://placehold.it/810x2028", 
 
     "back": "http://placehold.it/810x2028" 
 
    } 
 
\t } 
 
}