这是我在 script.js 中的 jQuery 函数 该函数用于从 Flicker 获取 feed 并填充结构。
我想将 html 结构填充到另一个名为“items.html”的 html 页面中
$function getImages(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=90528678@N03&lang=en-us&format=json&jsoncallback=?", displayImages);
function displayImages(data) {
// Start putting together the HTML string
var htmlString = '';
// Now start cycling through our array of Flickr photo details
$.each(data.items, function(i,item){
// Here's where we piece together the HTML
htmlString += '<div class="item_wrapper" name="'+item.title+'">';
htmlString += '<img class="item_picture" src="' + item.media.m + '" alt=""/>';
htmlString += '<div class="item_data">';
htmlString += '<div class="item_company">';
htmlString += '<h3 class="fi se en">'+item.title+'</h3>';
htmlString += '</div>';
htmlString += '<div class="item_title">';
htmlString += '<h3 class="fi">'+item.title+'</h3>';
htmlString += '<h3 class="se">'+item.title+'</h3>';
htmlString += '<h3 class="en">'+item.title+'</h3>';
htmlString += '</div>';
htmlString += '</div>';
htmlString += '</div>';
});
// Pop our HTML in the DIV tag of items.html
// Here's the problem.
$('div').html(htmlString);
}
}
那么我该怎么做呢? 谢谢!!!
最佳答案
这是一个可行的简化版本。
getImages();
function getImages(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=90528678@N03&lang=en-us&format=json&jsoncallback=?",
function(data) {
var htmlString = '';
$.each(data.items, function(key, value){
htmlString += '<div>'+value.title+'</div>';
htmlString += '<img src="'+value.media.m+'">';
});
$('div').html(htmlString);
});
}
我实际上不知道为什么你的版本不起作用。
getJSON 的回调可能需要是匿名的无名称函数,这就是 displayImages 函数不起作用的原因。我无法让它工作。
你的函数声明前面确实有一个$。也许这导致了问题。
虽然 html 字符串插入有效,但就像 Josh 所说的那样,带有节点的 DOM 插入比 html 插入更好。如果您只是在寻找一种快速而肮脏的解决方案,那么 html 字符串插入可能就可以了。
关于jquery - 如何将 html 元素填充到另一个页面中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13696806/