Question

此代码允许用户输入搜索词，然后呈现来自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);

上面的代码导致：

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

Answer 1

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

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 2

你有这一行

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

在forEach中添加了这就是为什么html标记会在具有类＆＃39;照片的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);
    });
};

为什么这段代码添加空的img标签？

2 个答案: