0

JSON を介してデータを取得しています

$.getJSON('http://api.flickr.com/services/rest/'
            + '?format=json&method=flickr.photosets.getPhotos'
            + '&photoset_id=' + photoset_id + '&per_page=1000' 
            + '&page=1' + '&api_key=' + apiKey 
            + '&user_id=' + userId + '&jsoncallback=?', 
    function (data) {
        var fullPhotoURL, flickrLink;
        var images = [];
        var basePhotoURL;
        var fullPhotoURL;

        $.each(data.photoset.photo, function (i, flickrPhoto) {
            var basePhotoURL = 'http://farm' + flickrPhoto.farm 
                 + '.static.flickr.com/' + flickrPhoto.server + '/' 
                 + flickrPhoto.id + '_' + flickrPhoto.secret + "_b.jpg";

            var fullPhotoURL = 'http://farm' + flickrPhoto.farm 
                + '.static.flickr.com/' + flickrPhoto.server + '/' 
                + flickrPhoto.id + '_' + flickrPhoto.secret + "_b.jpg";

            images.push($("<img/>").attr("src", basePhotoURL));
        });

        $.each(images, function (index, img) {
            img.appendTo("#photographs").wrap(("<div class='item'></div>"));

        });

    });

各 .item div に (href basePhotoURL と fullPhotoURL を使用して) 2 つの a を追加したいと考えています。

$(".item")
    .append("<a href='" + basePhotoURL + "'.jpg' class='zoom' />");
$(".item")
    .append("<a href='" + fullPhotoURL + "' class='flickr' target='_blank' />");

問題は、これらを 2 番目の各関数に入れると、#photographs (divception :-)) に存在するすべての .item にこれらの 2 つの a が追加されることです (したがって、300 アイテム x 2 a の PER .item)。これらの 2 つの a を最後の各関数の外に置くと、未定義のエラーが発生します。ちなみに、fullPhotoURL 変数と basePhotoURL 変数の値は気にしないでください。それらは正しくありません。

ありがとう！

4

4 に答える 4

1

Eliの答えとこの投稿の組み合わせ。ここでは、データを DOM に 1 回だけ追加します。

.getJSON('http://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=' + photoset_id + '&per_page=1000' + '&page=1' + '&api_key=' + apiKey + '&user_id=' + userId + '&jsoncallback=?', function(data) {

    var dataToAppend = ''
    $.each(data.photoset.photo, function(i, flickrPhoto){
        var basePhotoURL = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/'
        + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + "_b.jpg";  

        var fullPhotoURL = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/'
        + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + "_b.jpg";          

        var $img = $("<img/>").attr("src", basePhotoURL);
        var $wrap = $("<div class='item'></div>");
        $wrap.append($img);
        $wrap.append("<a href='" + basePhotoURL + "'.jpg' class='zoom' />");
        $wrap.append("<a href='" + fullPhotoURL + "' class='flickr' target='_blank' />");
        dataToAppend += $wrap;
    });
    $'#photographs').append(dataToAppend);
});
于 2013-01-18T21:00:28.523 に答える
1

これも基本的に同じで、お探しのフォーマットを取得できました。

$.getJSON('http://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=' + photoset_id + '&per_page=1000' + '&page=1' + '&api_key=' + apiKey + '&user_id=' + userId + '&jsoncallback=?', function (data) {
    var fullPhotoURL, flickrLink;
    var images = [];
    var basePhotoURL;
    var fullPhotoURL;

    $.each(data.photoset.photo, function (i, flickrPhoto) {
        var basePhotoURL = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/' + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + "_b.jpg";
        var fullPhotoURL = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/' + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + "_b.jpg";

        $('<img/>', { 'src': basePhotoURL }).appendTo("#photographs").wrap('<div/>', { 'class': 'item' }).append('<a href="' + basePhotoURL + '.jpg" class="zoom" /> <a href="' + fullPhotoURL + '" class="flickr" target="_blank" />');
    });
});
于 2013-01-18T21:05:29.200 に答える
1

それらを div タグに直接追加しないのはなぜですか?

    var div = $("<div class='item'></div>");
    div.append(....);
    div.append(....);

また、2 番目のループの最初のループから変数にアクセスすることはできません。何らかの理由で 2 つのループが本当に必要な場合は、それらを配列に渡すことができます。

    images.push({base: basePhotoURL, full: fullPhotoURL});

2番目のループでimgを作成します（または残りと一緒に渡します）。

パフォーマンスが気になる場合は、次のようにします。

    var plist = $("<div></div>");
    $.each(data.photoset.photo, function (i, flickrPhoto) {
        var row = $("<div class='item'></div>");

         //add stuff

        plist.append(row);
    });
    plist.appendTo("#photographs");
于 2013-01-18T20:48:58.377 に答える
0

必要以上に物事を難しくしていると思います。これが私の提案された変更です。

.getJSON('http://api.flickr.com/services/rest/?format=json&method=flickr.photosets.getPhotos&photoset_id=' + photoset_id + '&per_page=1000' + '&page=1' + '&api_key=' + apiKey + '&user_id=' + userId + '&jsoncallback=?', function(data) {

    $.each(data.photoset.photo, function(i, flickrPhoto){
        var basePhotoURL = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/'
        + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + "_b.jpg";  

        var fullPhotoURL = 'http://farm' + flickrPhoto.farm + '.static.flickr.com/'
        + flickrPhoto.server + '/' + flickrPhoto.id + '_' + flickrPhoto.secret + "_b.jpg";          

        var $img = $("<img/>").attr("src", basePhotoURL);
        var $wrap = $("<div class='item'></div>");
        $wrap.append($img);
        $wrap.append("<a href='" + basePhotoURL + "'.jpg' class='zoom' />");
        $wrap.append("<a href='" + fullPhotoURL + "' class='flickr' target='_blank' />");

        $wrap.appendTo('#photographs')

    });

});

これで、img を生成し、次にそのラッパーを生成し、img をラッパーに追加し、アンカーをラッパーに追加し、ラッパーを写真の div に追加します。そして、すべてを 1 つのループ内で一度に実行しています。2 番目のループは必要ないため、画像配列も必要ありません。

于 2013-01-18T20:48:11.550 に答える