javascript - Why this code adding empty img tag? -
this code allows user enter search term, , presents series of images flickr have tag. works intended can't understand why generates many img tags.
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); the above code results in:
<!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> why adding many img tags?
you creating new keydown handler each item in returned array, should use hide/show of iamges instead removing , setting blank 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>
Comments
Post a Comment