Question

我有一个Bootstrap轮播。我希望使用jQuery和CSS动态填充每张幻灯片的背景，以便为每张幻灯片设置background-size: cover;。

我在每个幻灯片data-src上都有一个属性，每个幻灯片都会填充相应的图像位置。

E.G。

data-src="http://www.clickwallpapers.com/wp-content/uploads/2014/02/Wallpapers.jpg"

我的jQuery代码选择了它并将其应用于项目的CSS。

的jQuery

srcImage = $('.item-image').data('src');
$('.item-image').css('background-image', 'url("' + srcImage + '")');

如果只有一张幻灯片，此代码有效，但是当引入新幻灯片时，它会获取最后一张幻灯片的图像并将其应用于所有幻灯片，因为它们都使用相同的类。

我曾尝试使用$(this)选择器，如下所示，但这打破了整个事情。

$('.item-image').css('background-image', 'url("' + $(this).data('src') + '")');

有人能指出我正确的方向来获取每个项目的数据属性吗？

Answer 1

$(".item-image").css("background-image", function() {
    return 'url("' + $(this).data('src') + '")';
});