在jQuery上将div背景url替换为img src

Question

我有一个菜单，每个菜单项都包含一个带有背景url的div。它看起来像这样：

<div class="iksm-term__image-container">
<div class="iksm-term__image" style="background-image: url(https://example.com/1.jpg)"></div>
</div>
<div class="iksm-term__image-container">
<div class="iksm-term__image" style="background-image: url(https://example.com/2.jpg)"></div>
</div>
<div class="iksm-term__image-container">
<div class="iksm-term__image" style="background-image: url(https://example.com/3.jpg)"></div>
</div>
<div class="iksm-term__image-container">
<div class="iksm-term__image" style="background-image: url(https://example.com/4.jpg)"></div>
</div>

我试着这样做：

jQuery (function($) {

$('.iksm-terms-tree--children .iksm-term__image-container').html('<img>');

$('.iksm-terms-tree--children .iksm-term__image-container').each(function() {
var url = $('.iksm-term__image').css('background-image');
url = url.replace(/url(["']?/, '').replace(/["']?)$/, '');
$(this).find('img').attr('src','/url');
$('.iksm-term__image').css('background-image', 'none');
});


});

但我得到的不是通往图像的路径，而是一个"；url"：

<div class="iksm-term__image-container"><img src="/url"></div>
<div class="iksm-term__image-container"><img src="/url"></div>
<div class="iksm-term__image-container"><img src="/url"></div>
<div class="iksm-term__image-container"><img src="/url"></div>

如果能在这件事上得到任何帮助，我将不胜感激。

Answer 1

代码行的问题是：$('.iksm-terms-tree--children .iksm-term__image-container').html('<img>');覆盖了每个iksm-term__image-container内的所有行，因此之后就不存在$('.iksm-term__image')了。为了避免这种情况，在覆盖htmldiv:之前捕获url

$(function($) {
$('.iksm-terms-tree--children .iksm-term__image-container').each(function() {

//trap the background property
var url = $(this).find(".iksm-term__image").css('background-image');
//keep only url between parenthesis
url = url.replace(/url(([^)]+))/, '$1');
//replace line by tag `img` with the right url directly
$(this).html(`<img src=${url}>`);
//$(this).find('img').attr('src', url);
//$('.iksm-term__image').css('background-image', 'none');
});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="iksm-terms-tree--children">
<div class="iksm-term__image-container">
<div class="iksm-term__image" style="background-image: url(https://example.com/1.jpg)"></div>
</div>
<div class="iksm-term__image-container">
<div class="iksm-term__image" style="background-image: url(https://example.com/2.jpg)"></div>
</div>
<div class="iksm-term__image-container">
<div class="iksm-term__image" style="background-image: url(https://example.com/3.jpg)"></div>
</div>
<div class="iksm-term__image-container">
<div class="iksm-term__image" style="background-image: url(https://example.com/4.jpg)"></div>
</div>
</div>

新的html代码：

<div class="iksm-terms-tree--children">
<div class="iksm-term__image-container"><img src="https://example.com/1.jpg"></div>
<div class="iksm-term__image-container"><img src="https://example.com/2.jpg"></div>
<div class="iksm-term__image-container"><img src="https://example.com/3.jpg"></div>
<div class="iksm-term__image-container"><img src="https://example.com/4.jpg"></div>
</div>

Answer 2

我想你只是犯了一个小错误。您提供一个变量作为值(String(。例如('/url')

解决方案：

$(this).find('img').attr('src',url);

或者如果在这种情况下您需要额外的/，

$(this).find('img').attr('src','/'+url);