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

从json获取静态src返回undefined

1 个答案: