Как проверить существующий идентификатор изображения и скрыть впоследствии сгенерированные идентичные

У меня есть запрос Ajax с функцией успеха, которая возвращает изображения, загруженные для определенного ресурса. Проблема в том, что если я загружу КВАДРАТНОЕ изображение, а затем загружу ПОРТРЕТ или ПЕЙЗАЖ, оно снова отобразит то же изображение.

Я создал переменную, которая генерирует уникальный идентификатор (текущая дата/время) и устанавливает его как идентификатор каждого изображения. Как проверить, что изображение уже есть на странице, и если да, то не отображать идентичное с тем же 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, мне нужно иметь возможность возвращать только один экземпляр каждого (проверяя, существует ли он уже).

ПОЯСНЕНИЕ: логика должна быть следующей

Если изображение с ориентацией КВАДРАТ (<p>SQUARE</p>) / ПОРТРЕТ (<p>PORTRAIT</p>) / ЛАНДШАФТ (<p>LANDSCAPE</p>) существует в div .result, затем скройте последующую загрузку изображений КВАДРАТ/ПОРТРЕТ/ЛАНДШАФТ, которые загружаются.


jquery ajax unique-id
person Matt    schedule 21.04.2015    source источник
comment
Почему вы звоните JSON.stringify, а потом JSON.parse? Это эквивалентно var obj = response.   -  person Barmar    schedule 21.04.2015

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете использовать селектор 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>"));
    }
});
person Barmar    schedule 21.04.2015
comment
Это не скрывает изображения, которые уже находятся в системе для связанного актива. Когда пользователь отправляет изображение, обратный вызов успеха возвращает изображения (квадратные/портретные/пейзажные), которые уже есть у связанного актива. - person Matt; 22.04.2015
comment
В чем разница между сокрытием изображений, которые уже есть, и отсутствием загрузки дубликата изображения? - person Barmar; 22.04.2015
comment
Смотрите решение, которое я разместил ниже. Я очищаю div .results перед загрузкой изображений из обратного вызова успеха. - person Matt; 22.04.2015

arrow_upward
0
arrow_downward

Одна из возможных проблем заключается в том, что у вас нет пробела между вашими атрибутами «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 изображения, а не только на идентификатор, для последующего использования в обратных вызовах и т. д. Например, вы можете найти .data() пригодится для этого.

Но возможным альтернативным решением для их самостоятельного создания, если вам нужно использовать идентификатор, может быть использование .uniqueId() из пользовательского интерфейса jQuery. Например:

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/

person pioto    schedule 21.04.2015
comment
Вам не нужно ставить пробел после закрывающей кавычки атрибута, кавычка действует как разделитель. - person Barmar; 22.04.2015

arrow_upward
0
arrow_downward

Решение было намного проще: нужно было просто очищать .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>");
}
person Matt    schedule 22.04.2015