1

これは、script.js の jQuery 関数です。この関数は、Flicker からフィードをフェッチし、構造を設定するために使用されます。

「items.html」と呼ばれる別の 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

これは機能する簡易バージョンです。

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文字列挿入は機能しますが、ノードを使用したDOM挿入はhtml挿入よりも優れています。迅速で汚いソリューションを探しているだけなら、html 文字列の挿入で問題ないかもしれません。

于 2012-12-04T10:08:41.350 に答える
1

ajax ロード機能を使用して、Web ページに 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 に答える