Question

我有一个Ajax请求，其成功函数返回为特定资产上传的图像。问题是如果我上传SQUARE图像，然后上传PORTRAIT或LANDSCAPE，它将再次显示相同的图像。

我创建了一个生成唯一ID（当前日期/时间）的变量，并将其设置为每个图像的id。如何检查以确保图像已经在页面上，如果是，则不显示具有相同ID的相同图像？

success: function(response){
    var random = Date.now();
    var r = JSON.stringify(response);
    var obj = $.parseJSON(r);
    for (var property in obj.entity.entries) {
        if (obj.entity.entries.hasOwnProperty(property)) {
            $(".response").append($("<li><img id='" + random + "'width='100' height='100' src='" + obj.entity.entries[property].uri + "'/></img><p>" + obj.entity.entries[property].orientation + "</p></li>"));
        }
    }
    $(".share-link").html("<div class='alert alert-success'><p>Success! " + imageid.value +" was posted.</p></div>");
}

因此，我不需要返回SQUARE方向，上传其他图片并返回SQUARE，SQUARE，PORTRAIT，而是需要返回每个图片的单个实例（检查是否已存在）。

澄清：逻辑应如下

如果SQUARE div中存在方向为SQUARE（PORTRAIT）/ PORTRAIT（LANDSCAPE）/ LANDSCAPE（.result）的图像，则隐藏后续加载加载的SQUARE / PORTRAIT / LANDSCAPE图像。

Answer 1

您可以使用搜索src=X属性的jQuery选择器。

$.each(obj.entity.entries, function(i, e) {
    if ($("img[src='" + e.uri + "'").length == 0) {
        $(".response").append($("<li><img id='" + random + "'width='100' height='100' src='" + e.uri + "'/></img><p>" + e.orientation + "</p></li>"));
    }
});

Answer 2

一个可能的问题是，您的“ID”之间没有空格。和＃＆＃39;宽度＆＃39;以上属性。试试这个：

 $(".response").append($("<li><img id='" + random + "' width='100' height='100' src='" + obj.entity.entries[property].uri + "'/></img><p>" + obj.entity.entries[property].orientation + "</p></li>"));

此外，您可以存储对图像的DOM元素本身的引用，而不仅仅是ID，以便稍后在回调等中使用。例如，您可能会发现.data()对此有用。

但是，如果你需要使用id，自己生成这些的可能替代解决方案可能是使用jQuery UI中的.uniqueId()。例如：

var img = $("<img>", {width: 100, height: 100, src: '#'});
img.uniqueId();
console.log(img);
var li = img.wrap("<li></li>").parent();
li.append($("<p></p>").text("Added IMG w/ ID: " + img[0].id));
$(".results").append(li);

看到这个小提琴：https://jsfiddle.net/8u7px73a/4/

Answer 3

解决方案更容易：只需要在每次提交时清除.reponse div $(".response").clear();，因此返回的图像是新的，而不是重复的。

success: function(response){
    var random = Date.now();
    var obj = response;
    $(".response").empty();
    for (var property in obj.entity.entries) {
         if (obj.entity.entries.hasOwnProperty(property)) {
             $(".response").append($("<li><img id='" + random + "' width='100' height='100' src='" + obj.entity.entries[property].uri + "'/></img><p>" + obj.entity.entries[property].orientation + "</p></li>"));
         }
    }
         $(".share-link").html("<div class='alert alert-success'><p>Success! " + imageid.value +" was posted.</p></div>");
}

如何检查现有图像ID并隐藏随后生成的相同图像ID

3 个答案: