得到更多的元素屬性costum

Question

代碼：

<div id="gallery" data-image="img_folder/g1.jpg"></div> 
<div id="gallery" data-image="img_folder/g2.jpg"></div> 
<div id="gallery" data-image="img_folder/g3.jpg"></div> 
<div id="gallery" data-image="img_folder/g4.jpg"></div> 
<div id="gallery" data-image="img_folder/g5.jpg"></div> 

CSS：

<style type="text/css"> 
#gallery { width:100px; height:100px; background-size:cover; } 
</style> 

的jQuery：

var el = $("#gallery"); 
var img = el.attr("data-image"); 

for(i=0; i<=el.length; i++) { 
    el.css({ "backgroundImage": "url("+img+")" }); 
} 

但是，圖像不顯示到div的，沒有成功的任何想法???

Answer 1

元素的第一個ID必須是唯一的，使用類

<div class="gallery" data-image="img_folder/g1.jpg"></div> 
<div class="gallery" data-image="img_folder/g2.jpg"></div> 
<div class="gallery" data-image="img_folder/g3.jpg"></div> 
<div class="gallery" data-image="img_folder/g4.jpg"></div> 
<div class="gallery" data-image="img_folder/g5.jpg"></div> 

和

.gallery { width:100px; height:100px; background-size:cover; } 

然後

$('.gallery').css('backgroundImage', function(){ 
    return 'url(' + $(this).data('image') + ')'; 
}) 

演示：Fiddle