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