jQuery $ .each循環處理數組

Question

我正在使用jquery中的對象內部的URL數組，而我正接近完成，但我遇到了一個小問題。

我將以下循環綁定到click函數，當用戶單擊照片（在[location]處）時，應在下面加載一堆相應的照片，這些照片將存儲在數組中，並且我可以成功訪問其中的數組正確的對象，但不是將URL順序插入，而是將每個URL插入到用逗號分隔的每張照片中。

即代替： img src="[0]" ， img src="[1]" ， img src="[2]" ...

我看到的是： img src="[0],[1],[2]" ...

$.each(albums[location].photos, function(index, val){
  $('#'+cover_id+'').append('<div id="'+cover_id+'" class="thumbnail" style="display:inline-block; padding: 0 25px;"><img src='+albums[location].photos+' id="coverPhoto" height="320" width="320"><figcaption>'+location+'</figcaption></a></div>');
});

我想我可以使用另一個循環來解決它，但是由於使用$ .each似乎很笨拙。

任何幫助將不勝感激

Answer 1

您必須使用$ .each的參數

你有兩種方法，使用索引或值

 $.each(albums[location].photos, function(index, val){   $('#'+cover_id+'').append('<div id="'+cover_id+'" class="thumbnail"
 style="display:inline-block; padding: 0 25px;"><img
 src='+albums[location].photos[index]+' id="coverPhoto" height="320"
 width="320"><figcaption>'+location+'</figcaption></a></div>'); });

要么

$.each(albums[location].photos, function(index, val){   $('#'+cover_id+'').append('<div id="'+cover_id+'" class="thumbnail"
style="display:inline-block; padding: 0 25px;"><img
src='+val+' id="coverPhoto" height="320"
width="320"><figcaption>'+location+'</figcaption></a></div>'); });

Answer 2

將主容器添加一次，然后在即將完成循環時將其關閉，此處的代碼更清晰

$.each(albums[location].photos, function(index, val){
    if (index == 0) {
       $('#'+cover_id+'').append('<div id="'+cover_id+'" class="thumbnail" style="display:inline-block; padding: 0 25px;">');
    }

    $('#'+cover_id+'').append('<img src='+albums[location].photos[index]+' id="coverPhoto" height="320" width="320">');

    if (albums[location].photos.length >= (index - 1)) {         
       $('#'+cover_id+'').append('<figcaption>'+location+'</figcaption></a></div>');
    }
});

Answer 3

我相信你會想用<img src='+val+'...替換<img src='+albums[location].photos+'... <img src='+val+'...

我還要補充一點，您似乎在重復使用的元素中重復使用ID，這幾乎肯定會在將來造成問題，例如，如果您想在同一頁面中運行兩次圖像替換。 它也違反了HTML規范。

Answer 4

問題：您正在將整個數組本身分配為源，而不是索引中的特定數組。 <img src='+albums[location].photos+'

解決方案：使用回調函數返回的val變量。 此val在索引處指向特定項目，並在每次迭代中遞增其指向下一個項目。

<img src='+val+'