2016-10-22 90 views
0

我正在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而顯得笨重。

任何幫助,將不勝感激

回答

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[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>'); }); 
+0

這正是我一直想念的!我一直在試圖繞過對象遍歷和每個循環,這是關鍵!非常感謝:) – JQBolo

+0

但給瞭解決方案之後,我給你正確的方式來調試它。打開Chrome開發者工具或者瀏覽器的任何開發工具(我爲此工作做了優先選擇),然後將它放在$ .each的「內部」行中,您可以看到所有傳遞的值,哪裏出錯。也許你必須把你的代碼分成幾行來閱讀 – ainasiart

0

我相信你會想<img src='+val+'...

更換<img src='+albums[location].photos+'...我還想補充一點,它看起來像你重用你重複的元素,這幾乎是肯定的ID例如,如果您想要在相同頁面中替換兩次圖片,請創建問題。它也違反了HTML規範。

1

前置主容器和一次當你即將完成循環時關閉它,這裏更清晰的代碼

$.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>'); 
    } 
}); 
0

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

解決方案:使用回調函數返回的val變量。 val指向索引處的特定項目,並在每次迭代時指向下一個項目。

<img src='+val+'