javascript - 基于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"
    }]
}

基本上，我正在寻找一种方法来打开覆盖层和要根据 json 中的 title 填充的 img src (或者其他内容，如果它更多)方便)，这样它就可以选择合适的 src。当项目只有一个时我就成功了，但我不知道如何管理这种区别。

非常感谢任何提示或解决方案。非常感谢:)

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: {
    	type1: {
        "title": "first",
        "front": "http://placehold.it/810x2028?text=front",
        "back": "http://placehold.it/810x2028?text=back"
        },
    	type2: {
        "title": "second",
        "front": "http://placehold.it/810x2028",
        "back": "http://placehold.it/810x2028"
    }
	}
}