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

【问题标题】：How to check for existing image id and hide subsequently generated identical ones如何检查现有图像 ID 并隐藏随后生成的相同图像
【发布时间】：2015-04-21 19:59:43
【问题描述】：

我有一个 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，我需要能够只返回每个实例的一个实例（检查一个是否已经存在)。

澄清：逻辑应该如下

如果.result div 中存在 SQUARE(SQUARE) / PORTRAIT(PORTRAIT) / LANDSCAPE(LANDSCAPE) 方向的图像，则隐藏随后加载的 SQUARE/PORTRAIT/LANDSCAPE 图像.

【问题讨论】：

你为什么先打电话JSON.stringify，然后再打电话JSON.parse？相当于var obj = response。

标签： jquery ajax unique-id

【解决方案1】：

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

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

【讨论】：

这不会隐藏相关资产系统中已有的图像。当用户提交图片时，成功回调会返回关联资产已经拥有的图片（正方形/纵向/横向）。
隐藏已经存在的图片和不加载重复的图片有什么区别？
查看我在下面发布的解决方案。在从成功回调加载图像之前，我正在清除 .results div。

【解决方案2】：

一个可能的问题是上面的“id”和“width”属性之间没有空格。试试这个：

 $(".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/

【讨论】：

属性的右引号后不必有空格，引号充当分隔符。

【解决方案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>");
}

【讨论】：