个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 00:13:47 25 4
gpt4 key购买 nike

此代码允许用户输入搜索词，然后显示来自 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标签？

最佳答案

您正在为返回数组中的每个项目创建一个新的 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>

关于javascript - 为什么这段代码添加空的 img 标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30639564/

25 4 0
文章推荐： javascript - 如何从knockoutjs更新对象的值？
文章推荐： jquery - 为什么我选择选项卡的 switch 语句不起作用？
文章推荐： javascript 在 Internet Explorer 上不起作用
文章推荐： JavaScript map()，集合中对象的未定义属性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com