Fatal编程技术网
  • javascript/
  • Javascript 为什么这个代码添加了空的img标签？

Javascript 为什么这个代码添加了空的img标签？

javascript jquery html

Javascript 为什么这个代码添加了空的img标签？,javascript,jquery,html,Javascript,Jquery,Html,此代码允许用户输入搜索词，然后显示Flickr中具有该标记的一系列图像。这是预期的工作，但我不明白为什么会产生这么多的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=?"; va

此代码允许用户输入搜索词，然后显示Flickr中具有该标记的一系列图像。这是预期的工作，但我不明白为什么会产生这么多的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);

var main=函数（）{
“严格使用”；
变量url=”http://api.flickr.com/services/feeds/photos_public.gne?tags=catss&lang=en-us&format=json&jsoncallback=？”；
var$searchInput=$（“”）；
$（“标题”）.append（$searchInput）；
$.getJSON（url，函数（flickrResponse）{
flickrResponse.items.forEach（函数（照片）{
变量$img=$（“
上述代码导致：


<!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标签？
您有这一行


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


添加到forEach中，这就是为什么html标记在具有类“photos”的div下多次附加图像标记的原因

更新（以防止附加空img标记）：


var main=函数（）{
“严格使用”；
变量url=”http://api.flickr.com/services/feeds/photos_public.gne?tags=catss&lang=en-us&format=json&jsoncallback=？”；
var$searchInput=$（“”）；
$（“标题”）.append（$searchInput）；
$.getJSON（url，函数（flickrResponse）{
flickrResponse.items.forEach（函数（照片）{

var$img=$（“您正在为返回数组中的每个项目创建一个新的键控处理程序，还应该使用隐藏/显示iamges，而不是删除和设置空的src



var main=function（）{
“严格使用”；
变量url=”http://api.flickr.com/services/feeds/photos_public.gne?tags=catss&lang=en-us&format=json&jsoncallback=？”；
var$searchInput=$（“”）；
$searchInput.on（“按键”，函数（事件）{
var项=该值；
如果（event.keyCode===13）{
$（.main.photos img”）.hide（）.each（函数（）{
var$img=$（本）；
var tags=$img.data（'tags'）；
if（标签索引OF（术语）>-1）{
$img.fadeIn（）；
}
})
}
});
$（“标题”）.append（$searchInput）；
$.getJSON（url，函数（flickrResponse）{
flickrResponse.items.forEach（函数（照片）{
console.log（'x'）
变量$img=$（“



是flickrResponse.items.forEach的原因。
如果您需要帮助，请用代码创建一个fiddle。fiddle意味着使用此网站或其他类似网站向我们展示一个~working example~很好，我在fiddle上添加了代码，但运行时遇到问题。@tasqyn该链接不是到jsfiddle:）@Nenotlep抱歉，意外粘贴了：）如何防止添加空的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);
    });
};