Почему этот код добавляет пустой тег img?

Этот код позволяет пользователю ввести поисковый запрос, а затем представляет серию изображений из Flickr, имеющих этот тег. Это работает по назначению, но я не могу понять, почему это генерирует так много тегов img.Почему этот код добавляет пустой тег img?

var main = function() { 
    "use strict"; 

    var url = "http://api.flickr.com/services/feeds/photos_public.gne?tags=catss&lang=en-us&format=json&jsoncallback=?"; 


    var $searchInput = $("<input>"); 

    $("header").append($searchInput); 


    $.getJSON(url, function (flickrResponse) { 

     flickrResponse.items.forEach(function (photo) { 

      var $img = $("<img>").hide(); 

      $img.attr("src", photo.media.m); 


      $searchInput.on("keypress", function (event) { 
       if (event.keyCode === 13) { 
        $img.remove(); 
        $img.removeAttr('src'); 

        var $tag = photo.tags.split(" "); 

        $tag.forEach(function (tag) { 
         if (tag === $searchInput.val()) { 
          $img.attr("src", photo.media.m); 
         } 
        }); 
        $("main .photos").append($img); 
        $img.fadeIn(); 
       } 
      }); 
      $("main .photos").append($img); 
      $img.fadeIn(); 

     }); 
    }).fail(function (jqxhr, textStatus, error) { 
     var err = textStatus + ', ' + error; 
     alert("Request Failed: " + err); 
    }); 
}; 

$(document).ready(main);

Приведенные выше результаты кода в:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <body> 
     <header><input></header> 
     <main> 
     <div class="photos"> 
      <img style=""> 
      <img style=""> 
      <img style=""> 
      <img style=""> 
      <img style=""> 
      <img style=""> 
      <img style=""> 
      <img style=""> 
      <img style=""> 
      <img style=""> 
      <img style="" src="http://farm9.staticflickr.com/8299/7875996296_734b9c599d_m.jpg"> 
      <img style=""> 
      <img style=""> 
      <img style=""> 
      <img style=""> 
      <img style=""> 
      <img style=""> 
      <img style=""> 
      <img style=""> 
      <img style=""> 
     </div> 
     </main> 
     <footer> </footer> 
     <script src="http://code.jquery.com/jquery-2.1.4.min.js"> 
     <script src="javascripts/app.js"> 
    </body> 
</html>

Почему это добавляет столько Img теги?

источник

2015-06-04 tasqyn

Beacause из 'flickrResponse.items.forEach'. Если вам нужна помощь, PLS создать скрипку с кодом. – lshettyl

Скрипт означает использование этого сайта http://jsfiddle.net или другого похожего на то, чтобы показать нам рабочий пример –

[Код на скрипте] (https://jsfiddle.net/v1s3kdau/#&togetherjs=PxoTvdbvwG), я добавил код на скрипке, но у меня есть проблема, чтобы запустить его. – tasqyn

Вы создаете новый KeyDown обработчик для каждого элемента в возвращаемом массиве, также вы должны использовать скрыть/показ iamges вместо удаления и настройки пустой ЦСИ

var main = function() { 
 
    "use strict"; 
 

 
    var url = "http://api.flickr.com/services/feeds/photos_public.gne?tags=catss&lang=en-us&format=json&jsoncallback=?"; 
 

 
    var $searchInput = $("<input>"); 
 

 
    $searchInput.on("keypress", function(event) { 
 
    var term = this.value; 
 
    if (event.keyCode === 13) { 
 
     $("main .photos img").hide().each(function() { 
 
     var $img = $(this); 
 
     var tags = $img.data('tags'); 
 

 
     if (tags.indexOf(term) > -1) { 
 
      $img.fadeIn(); 
 
     } 
 
     }) 
 
    } 
 
    }); 
 

 
    $("header").append($searchInput); 
 

 
    $.getJSON(url, function(flickrResponse) { 
 
    flickrResponse.items.forEach(function(photo) { 
 
     console.log('x') 
 
     var $img = $("<img>", { 
 
     src: photo.media.m 
 
     }).hide().data('tags', photo.tags.split(/\s+/)); 
 
     $("main .photos").append($img); 
 
     $img.fadeIn(); 
 
    }); 
 
    }).fail(function(jqxhr, textStatus, error) { 
 
    var err = textStatus + ', ' + error; 
 
    alert("Request Failed: " + err); 
 
    }); 
 
}; 
 

 
$(document).ready(main);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<header></header> 
 
<main> 
 
    <div class="photos"></div> 
 
</main> 
 
<footer></footer>

источник

2015-06-04 09:28:51

http://jsfiddle.net/arunpjohny/zn78xoLm/ –

у вас есть эта линия

$("main .photos").append($img);

добавил внутри Foreach Вот почему HTML-разметка является получением изображения тегов прилагаемых несколько раз под DIV который имеет «фотографии» класса.

UPDATE (для предотвращения пустой IMG тег добавляется):

var main = function() { 
    "use strict"; 

    var url = "http://api.flickr.com/services/feeds/photos_public.gne?tags=catss&lang=en-us&format=json&jsoncallback=?"; 


    var $searchInput = $("<input>"); 

    $("header").append($searchInput); 


    $.getJSON(url, function (flickrResponse) { 

     flickrResponse.items.forEach(function (photo) { 

      var $img = $("<img>").hide(); 

      $img.attr("src", photo.media.m); 


      $searchInput.on("keypress", function (event) { 
       if (event.keyCode === 13) { 
        $img.remove(); 
        $img.removeAttr('src'); 

        var $tag = photo.tags.split(" "); 

        $tag.forEach(function (tag) { 
         if (tag === $searchInput.val()) { 
          $img.attr("src", photo.media.m); 
          $("main .photos").append($img); 
          $img.fadeIn(); 
         } 
        }); 
       } 
      }); 
      //$("main .photos").append($img); 
      //$img.fadeIn(); 

     }); 
    }).fail(function (jqxhr, textStatus, error) { 
     var err = textStatus + ', ' + error; 
     alert("Request Failed: " + err); 
    }); 
};

источник

2015-06-04 09:15:46 V31

как предотвратить добавление пустых тегов img? – tasqyn

@tasqyn: обновлен ответ – V31

он предотвращает, но когда он запускается в первый раз, он не отображает все изображения. хорошо спасибо за вашу помощь :) – tasqyn

Почему этот код добавляет пустой тег img?

ответ

Смежные вопросы