flickr畫廊從指定的標記加載圖片

Question

嘿我有flickr畫廊，我想從它加載圖片到一個div'畫廊'，但只有兩個第一張圖片與'數據類別'中定義的指定標籤應加載到那個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的問題。我應該將兩張圖片加載到「圖庫」，但只能使用「數據類別」中給出的指定標籤。

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參數。

（注：我已經去除了立即調用的匿名函數，因爲它似乎並沒有增加任何價值。）