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中的img src来填充title（或者如果它更方便的话）所以它可以选择适当的src。当项目只有一个时，我成功了，但我不知道如何管理这种区别。

任何抬头或解决方案都非常感谢。非常感谢:)）

Answer 1

如果首先发出ajax请求并为click事件存储数据（而不是为每次单击发出ajax请求），则效率可能会更高。我没有这样做，因为它不是你要问的，而是需要考虑的事情。

下面我抓住了你点击的唯一标识符（即data-overlay中的type1），然后使用它来从你的json文件中选择正确的对象。

＆＃13;

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

＆＃13;

对json文件进行一些更改，以便更容易遍历

＆＃13;

{ 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"
    }
	}
}

＆＃13;

基于json文件

1 个答案: