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 中附加两个 a（带有 href basePhotoURL 和 fullPhotoURL）。

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

问题是，当我将它们放在每个函数的第二个中时，这两个 a 被附加到 #photographs (divception :-)) 中存在的每个 .item （因此，300 个项目 x 2 a 的 PER .item）。当我将这两个 a 放在每个函数的最后一个之外时，我得到一个未定义的错误。顺便说一句，不要介意 fullPhotoURL 和 basePhotoURL 变量的值；他们是不正确的。

谢谢！

4

4 回答 4

1

为什么不直接将它们附加到 div 标签？

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

此外，您无法从第二个循环中的第一个循环访问变量。如果由于某种原因你真的需要 2 个循环，你可以在数组中传递它们。

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

并在第二个循环中创建 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 回答
1

Eli的答案和这篇文章的结合。在这里，您只需将数据附加到 DOM 一次。

.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 回答
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。我们在一个循环中一次性完成所有工作。不需要第二个循环，因此不需要图像阵列。

于 2013-01-18T20:48:11.550 回答