Question

所以这就是我想要做的。我有一些div与背景图像名称Look-1.jpg - Look-6.jpg。我需要做的是立即添加-cut到所有这些，所以基本上将它们更改为Look-6-cut.jpg。

我试图这样做的原因是因为我有2个背景图像集合，我试图在不同的屏幕尺寸上切换它们。

当然可以用css这样做但是我必须逐个完成每一个。

我想知道是否有办法使用jQuery实现这一目标。

由于

<div class="item active" style="background: url('/assets/img/collection/Look-1.jpg') center center no-repeat;">
    <div class="carousel-caption item-caption">
        <h5 class="text-black">200 TC Cotton Percale Duvet Cover</h5>
        <a href="#" class="link-inline">View Product<i class="fa fa-angle-right"></i></a>
    </div>
</div>

Answer 1

var backgroundStyle = $(".item").css("background");
var imageFileName = "someFile.jpg";
var modifiedImageFileName = "modifiedFileName.jpg";
backgroundStyle.replace(imageFileName, modifiedImageFileName);

$(".item").css("background", backgroundStyle);

我希望这有帮助:)

Answer 2

$("div").css('background-image',(i,cur)=>cur.replace('.jpg','-cut.jpg'));
$("div").each(function(){
  console.log($(this).css('background-image'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item active" style="background: url('/assets/img/collection/Look-1.jpg') center center no-repeat;"></div>
<div class="item active" style="background: url('/assets/img/collection/Look-2.jpg') center center no-repeat;"></div>
<div class="item active" style="background: url('/assets/img/collection/Look-3.jpg') center center no-repeat;"></div>

这对你有用吗？第一行用.jpg替换所有出现的-cut.jpg，第二行只打印新值以证明这一点。

Answer 3

我用虚拟图像摆弄了一下，但这也适用于你的剪辑。

https://jsfiddle.net/5swgrfu6/6/

$(window).resize(function() {
var width = $(window).width();
if (width < 800) {
$(".item").css({"background": "url('https://dummyimage.com/200x200/ff0000/000') center center no-repeat"});
} 
else {
$(".item").css({"background": "url('https://dummyimage.com/200x200/000000/fff') center center no-repeat"});
 }
 });

jQuery：如何将字符串添加到css属性

3 个答案: