javascript - 如何动态地用imgs填充div？

Question

http://jsfiddle.net/84nv2dmL/

我正在尝试让这些字母图像按顺序显示。我尝试动态创建 div 并用 img 填充它们，但这不起作用。如何让这些字母按顺序显示？

<小时/>

jsfiddle代码:

function getQueryStringVar(name){
    var qs = window.location.search.slice(1);
    var props = qs.split("&");
    for (var i=0 ; i < props.length;i++){
        var pair = props[i].split("=");
        if(pair[0] === name) {
            return decodeURIComponent(pair[1]);
        }
    }
}

function getLetterImage(tag){

var flickerAPI = "https://www.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

            return $.getJSON( flickerAPI, {
                tags: tag,
                tagmode: "all",
                format: "json"
            })
            .then(function (flickrdata) {
                //console.log(flickrdata);
                var i = Math.floor(Math.random() * flickrdata.items.length);
                var item = flickrdata.items[i];
                var url = item.media.m;
                return url;
                }); 
}



$(document).ready(function() {
        var name = getQueryStringVar("name") || "Derek";

            var str = "letter,";
            var searchtags = new Array()
            for (var i = 0; i < name.length; i++) {
                //console.log(str.concat(searchtags.charAt(i)));
                searchtags[i] = str.concat(name.charAt(i));
            }
            for (var j = 0; j < name.length; j++){
            var request = getLetterImage(searchtags[j]);
            request.done(function(url) {
                $("body").append("<img src="+ url + "></img>");

                //var ele = document.createElement("div");
                //ele.setAttribute("class", "img" + j--);
                //document.body.appendChild(ele);

                //$("<img src="+ url +"></img>").appendTo("img"+j);

            });
            }
            //$("#img"+i).html("<img src="+ url + "></img>");

});

Answer 1

您基本上需要跟踪将图像附加到 DOM 的顺序，并确保它们与名称中的字母同步。创建了一个修复的 fiddle 。评论一致:

http://jsfiddle.net/84nv2dmL/2/

function getQueryStringVar(name) {
    var qs = window.location.search.slice(1);
    var props = qs.split("&");
    for (var i = 0; i < props.length; i++) {
        var pair = props[i].split("=");
        if (pair[0] === name) {
            return decodeURIComponent(pair[1]);
        }
    }
}

function getLetterImage(tag) {

    var flickerAPI = "https://www.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

    return $.getJSON(flickerAPI, {
            tags: tag.char,
            tagmode: "all",
            format: "json"
        })
        .then(function(flickrdata) {
            //console.log(flickrdata);
            var i = Math.floor(Math.random() * flickrdata.items.length);
            var item = flickrdata.items[i];
            var url = item.media.m;
            // return an object with url AND index
            return {
                ind: tag.ind,
                img: url
            };
        });
}



$(document).ready(function() {
    var name = getQueryStringVar("name") || "Derek";
    var urls = new Array(name.length); // array or URLs, in correct order
    var urlCounter = []; // keeps count or URLs received
    var str = "letter,";
    var searchtags = new Array();
    for (var i = 0; i < name.length; i++) {
        searchtags[i] = {
            char: str.concat(name.charAt(i)),
            ind: i
        };
    }
    for (var j = 0; j < name.length; j++) {
        var request = getLetterImage(searchtags[j]);
        request.done(function(url) {
            // when request is done, place image url in 'urls' array, in the correct order
            urls[url.ind] = url.img;

            // push object to the counter array, just to keep count
            urlCounter.push(url);

            // check if all image urls have been collected
            checkComplete();
        });

    }

    function checkComplete() {

        // if the number of URLs received is equal
        // to the number of characters in the name
        // append the images from the ordered array
        if (urlCounter.length == name.length) {
            for (var k = 0; k < urls.length; k++) {
                $("body").append("<img src=" + urls[k] + "></img>");
            }
        }
    }

});