1

嘿，我有 flickr 画廊，我想将图片从它加载到 div 'gallery'，但只有两张具有在 'data-category' 中定义的指定标签的第一张图片应该加载到该 div。

我有html： 

    <div data-category="clouds"  class="gallery"></div>
    <div data-category="mount" class="gallery"></div>

js：

$('.gallery').each(function(index) {
    var dataCategory = $(this).attr('data-category');
    (function() {
        var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
        $.getJSON(flickerAPI, {
            tags : dataCategory,
            tagmode : "any",
            format : "json"
        }).done(function(data) {
            $.each(data.items, function(i, item) {
                var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
                $("<img/>").attr("src", sourceSquare).appendTo(".gallery");
                if (i === 1) {
                    return false;
                }
            });

        });

    })();

});

我遇到的问题是，现在我将所有指定标签中的前两张图片加载到所有“画廊”div 中。我应该将两张图片加载到“图库”，但只能使用“数据类别”中给出的指定标签

4

1 回答 1

0

你说.appendTo(".gallery"), 它附加到所有匹配的元素。如果我了解您要执行的操作，则需要为当前外部.each()迭代附加到单个画廊元素。

尝试这样的事情：

$('.gallery').each(function(index, el) { // <-- add parameter for current element
    var dataCategory = $(this).attr('data-category');
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    $.getJSON(flickerAPI, {
        tags : dataCategory,
        tagmode : "any",
        format : "json"
    }).done(function(data) {
        $.each(data.items, function(i, item) {
            var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
            $("<img/>").attr("src", sourceSquare).appendTo(el); // <-- use el
            if (i === 1) {
                return false;
            }
        });
    });
});

该$.getJSON()函数是异步的，但它的.done()函数仍然可以访问el包含函数的参数。

（注意：我删除了立即调用的匿名函数，因为它似乎没有增加任何价值。）

于 2013-05-18T23:56:49.063 回答