为什么这段代码添加空的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

东阳flickrResponse.items.forEach'的'。如果您经过帮助，请使用您的代码创建一个小提琴。 – lshettyl

小提琴的意思是使用这个网站http://jsfiddle.net或其他类似的向我们展示一个〜工作示例 –

[代码在小提琴]（https://jsfiddle.net/v1s3kdau/#&togetherjs=PxoTvdbvwG）以及我已经添加代码小提琴，但我有一个问题，让它运行。 – tasqyn

您在返回数组中创建的每一项新的keydown的处理程序，也应该使用iamges的隐藏/显示，而不是删除和设置空白SRC

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标签？

回答

相关问题