Jquery $。各ループを配列で処理する

Question

jqueryのオブジェクト内にあるURLの配列を使用していますが、私は非常に近いところにいるので、少し問題があります。

次のループをクリック機能にバインドしました。ユーザーが[場所]で写真をクリックすると、対応する写真が下にロードされます。これらの写真は配列に格納され、正常にアクセスできます配列は正しいオブジェクトの中にありますが、URLSを順番に挿入する代わりに、コンマで区切られた各写真にすべての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を使用するために厄介なようです。

すべてのヘルプは非常に私はあなたが私もほぼ確かである、あなたは繰り返し要素にIDを再利用しているように見えることを追加します<img src='+val+'...

で<img src='+albums[location].photos+'...を交換したいと考えている

Answer 1

一度インデックスまたは値

$.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

をいただければ幸いですたとえば、同じページで2回置き換えてイメージを実行したい場合など、問題が発生する可能性があります。また、HTML仕様にも違反しています。

Answer 3

プリペンド本体容器を使用し、あなたは2つの方法があります$ .each

のパラメータを使用する必要がありますし、ループを完了しようとしているときに閉じます。より明確なコードはここにあります。

$.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 4

問題：インデックス全体の配列ではなく、配列全体をソースとして割り当てています。 <img src='+albums[location].photos+'

ソリューション：コールバック関数によって返さval変数を使用してください。このvalは、インデックスの特定のアイテムをポイントし、各繰り返しで次のアイテムをポイントするようにインクリメントします。

<img src='+val+'