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必须是唯一的，请使用class

<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

获得更多元素属性自定义

1 个答案: