0

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

澄清：逻辑应该如下

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

4

3 回答 3

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>"));
    }
});
于 2015-04-21T20:05:57.567 回答
0

解决方案要简单得多：只需要在每次提交时清除.reponsediv ，因此返回的图像是新的而不是重复的。$(".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>");
}
于 2015-04-22T17:00:43.777 回答
0

一个可能的问题是上面的“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，您自己生成这些可能的替代解决方案可能是.uniqueId()从 jQuery UI 使用。例如：

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/

于 2015-04-21T20:23:10.960 回答