Question

我有这些元素

<div class="circle-200" data-image="pic1" ></div>
<div class="circle-200" data-image="pic2" ></div>
<div class="circle-200" data-image="pic3" ></div>

页面加载后我会认为数据图像值成为相应圆圈200类的背景图像

使用jQuery是否可以做这样的事情？

$('.circle-200').css('background-image', "url('"+$(this).data('img')+"')");

Answer 1

您需要使用.css( propertyName, function )

将值返回到set的函数。这是当前的元素。接收集合中元素的索引位置和旧值作为参数。

另请注意，image不是img

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle-200" data-image="pic1">pic1</div>
<div class="circle-200" data-image="pic2">pic2</div>
<div class="circle-200" data-image="pic3">pic3</div>

jQuery使用Data属性设置Class的CSS样式

1 个答案: