Question

我对网络开发很陌生，所以这对你来说似乎微不足道：

我正在建造一面墙，上面展示了100幅微缩景观图片。我从远程JSON获取这些图片的URL，该JSON仅包含100个最新上传的图片，从最近的开始。 JSON不断更新。

JSON结构：

[
{
    "name": "Blue Mountains",
    "url": "http://foo.com/url-to-picture", // <- Most recent
    "location": "Canada"
},
{
    "name": "Yellow Lake",
    "url": "http://foo.com/url-to-picture", // <- Second most recent
    "location": "Greece"
}, ...
]

我想每隔10秒检查一次JSON并检测是否已上传新图片，如果是，我想知道有多少图片，然后用新图片替换墙上最旧的图片。< / p>

我真正想到的就是：

function getNewPictures() {
    $.getJSON("http://bar.com/url-to-json", function(result) {
        latest100 = result;
        checkIfNewPictures(); // I don't know how to do this
        old100 = latest100;
    });
}

setInterval(getNewPictures, 10000);

正如您所看到的，我不知道如何比较old100和latest100。我还认为，如果我能将X个新图片存储到另一个阵列中，那么对我来说会更容易，这样更新墙的过程就会更容易。

实现这一目标最实际的方法是什么？

谢谢！

Answer 1

有几种方法可以解决这个问题，但我会这样做。

您正在使用的数据结构似乎不包含每张图片的唯一标识符。您将需要一种方法来唯一标识每张图片，因此您必须创建一些内容。

假设您最初输出的图像如下：

$.getJSON("http://bar.com/url-to-json", function(result) {
    $.each(result, function(index, picture) {
        $('.wrapper').append("<img class='json-image' src='" + picture.url + "'/>");
    });
});

您还需要为每个元素指定一个唯一的标识符，以便可以引用它。

    ...
    $.each(result, function(index, picture) {
        var pictureID = picture.name + 'something' + picture.location;
        pictureID = pictureID.replace(' ','');
        $('wrapper').append("<img class='json-image' src='" + picture.url + "' id='" + pictureID + "'/>");
    });
    ...

这是一个删除不在最新json中的图像的功能。

function removeImages(json) {
    var newImageIDs = [];
    $.each(json, function(index, picture) {
        //make an array of all the new image ID's
        var pictureID = picture.name + 'something' + picture.location;
        pictureID.replace(' ','');
        newImageIDs.push(pictureID);
    });

    $('.json-image').each(function() {
        if ( newImageIDs.indexOf($(this).attr('id')) < 0 ) {
            //this image is no longer in the json, remove it
            $(this).remove();           
        }
    });
}

现在，当您获得最新的JSON时，您可以添加新的JSON并删除不再存在的JSON。

$.getJSON("http://bar.com/url-to-json", function (result) {
    $.each(result, function (index, picture) {
        var pictureID = encodeURIComponent(picture.name + 'something' + picture.location);
        //only add new images
        if ( !$('#' + pictureID).length ) {
            $('.wrapper').append("<img class='json-image' src='" + picture.url + "' id='" + pictureID + "'/>");
        } 
    });
    removeImages(result);
});

使用jQuery检测JSON数组中已更改的元素数

1 个答案: