1

这是我在 script.js 中的 jQuery 函数。该函数用于从 Flicker 获取提要并填充结构。

我想将 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);
   }
}

那么我该怎么做呢？谢谢 ！！！

4

3 回答 3

1

您可以使用 ajax 加载函数来加载网页中的 html 内容。

$('div').load("file.html");
于 2012-12-04T05:42:09.757 回答
1

您可以使用以下方法将另一个 html 页面加载到元素中：

$('div').load("items.html");

您也不应该使用字符串连接来构建您的 dom 元素。

使用这样的东西：

var div = $('<div/>');

$.each(data.items, function(i, image) {

    var item = $('<div/>').addClass("item_wrapper").attr('name', image.title);

    $('<img/>').attr('src', image.media.m).appendTo(item);

    item.appendTo(div);

});

$('div').html(div);

等等...

于 2012-12-04T05:49:04.183 回答
1

这是一个可以工作的简化版本。

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 函数不起作用的原因。我无法让它工作。

You do have a $ in front of your function declaration. Maybe that contributed to the problem.

Though the html string insert works, like Josh said DOM insertion with nodes is better than html insertion. If you're just looking for a quick and dirty solution html string insertion might be fine.

于 2012-12-04T10:08:41.350 回答