Question

嘿我有flickr画廊，我想将图片加载到div'画廊'，但只有两个第一张带有'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;
                }
            });

        });

    })();

});

我遇到的问题是，现在我将所有指定标签中的前两张图片加载到所有“gallery”div中。我应该将两张图片加载到'gallery'，但只能使用'data-category'中指定的标签

Answer 1

你说.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参数。

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

flickr gallery从指定标签加载图片

1 个答案: