單擊時更改 div 的 background-image 屬性，並單擊圖像的 src

Question

我有一系列圖像設置，如下所示：

<img src="abc.jpg" class="change-img">
<img src="def.jpg" class="change-img">
<img src="ghi.jpg" class="change-img">

我在其他地方有一個單獨的 div，其中設置了內聯的背景圖像，例如：

<div class="change-me" style="background-image:url('xyz.jpg');background-size:100%;">

我想知道如何根據單擊的 img 使用一些 jQuery 代碼來動態更改背景圖像 URL。

因此，理想的情況是，如果您單擊圖像 abc.jpg，它會將 abc.jpg 放入 change-me class 的背景圖像屬性中。

這是我正在搞亂的 jQuery 的開始：

jQuery('.change-img').on('click', function() {
    var img = jQuery(this).attr('src');
    jQuery('.change-me').css('background-image', img);
});

它不起作用，所以有人協助並引導我朝着正確的方向前進會很棒！ 非常感謝提前

編輯：只是試圖改變 img 的顯示方式，但仍然沒有運氣，如果我把“none”放在那里，它就可以工作，所以我認為問題在於沒有檢測到正確點擊的圖像的 src。

jQuery('.change-img').click(function() {
    var img = jQuery(this).attr("src");
    jQuery('.change-me').css("background-image", "url:('"+img+"');");
});

Answer 1

url(http://...) , url沒有冒號

 jQuery('.change-img').click(function() { const img = jQuery(this).attr("src"); jQuery('.change-me').css("background-image", "url('"+img+"')"); });

 img { width: 100px; height: 100px; }.change-me { width: 120px; height: 120px; border: 1px solid #eee; }

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <img src="https://cdn.sstatic.net/Img/company/awards/appealie-saas-awards.png?v=30b5fc47c566" class="change-img"> <img src="https://cdn.sstatic.net/Img/company/awards/g2.svg?v=8416c53d06c8" class="change-img"> <img src="https://cdn.sstatic.net/Img/company/awards/remotetechbreakthrough.svg?v=3979e85e4b0b" class="change-img"> <div class="change-me"></div>