使用 jquery 更改背景图像的 url 部分

Question

我有一个为嵌入式 YouTube 视频动态创建的背景图像。现在我想更改背景图像的一部分 url。

这是我的 HTML 代码：

 <div class="jet-video__overlay--custom-bg" style="background-image: url(https://i.ytimg.com/vi/B3xqE5F2zHQ/maxresdefault.jpg);">

现在我想使用 jquery 将 url 中的“maxresdefault”更改为“hqdefault”。

这是我到目前为止尝试过的：

 $('.jet-video__overlay--custom-bg').attr("style").replace('maxresdefault','hqdefault');

Answer 1

像这样使用 .css('background-image') 和 replace

$(document).ready(() => {
 $('.jet-video__overlay--custom-bg')         // element to set the background to it */
 .css('background-image' ,                   // use .css('background-image'
     $('.jet-video__overlay--custom-bg')     // element to get the background from it
     .css('background-image')                // get the background
     .replace('maxresdefault' , 'hqdefault') //replace it
  );
});

.jet-video__overlay--custom-bg{
  width : 300px;
  height : 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="jet-video__overlay--custom-bg" style="background-image: url(https://i.ytimg.com/vi/B3xqE5F2zHQ/maxresdefault.jpg);"></div>

也正如@Rory 建议的那样^简单易行你可以使用, (i , value) => return .replace....

$(document).ready(() => {
 $('.jet-video__overlay--custom-bg')
 .css('background-image', (i, v) => v.replace('maxresdefault', 'hqdefault'));
});

.jet-video__overlay--custom-bg{
  width : 300px;
  height : 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="jet-video__overlay--custom-bg" style="background-image: url(https://i.ytimg.com/vi/B3xqE5F2zHQ/maxresdefault.jpg);"></div>

使用 jquery 更改背景图像的 url 部分

Change part of url of background-image using jquery

jquery

background-image