По щелчку мыши измените свойство фонового изображения div, щелкнув src изображения

#html #jquery

Вопрос:

У меня есть ряд изображений, настроенных, как показано ниже:

 lt;img src="abc.jpg" class="change-img"gt; lt;img src="def.jpg" class="change-img"gt; lt;img src="ghi.jpg" class="change-img"gt;

У меня есть отдельный div в другом месте с встроенным фоновым изображением, таким как:

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

Мне интересно, как я мог бы использовать код jQuery для динамического изменения URL-адреса фонового изображения на основе клика img.

Таким образом, идеальная ситуация будет, если вы нажмете на изображение abc.jpg это поставит abc.jpg в свойство background-image класса change-me.

Вот начало моего jQuery, с которым я возюсь:

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

Это не работает, так что было бы здорово, если бы кто-то помог и повел меня в правильном направлении! Заранее большое спасибо

Редактировать: Просто попытался изменить способ отображения img, но все равно не повезло, это работает, если я вставил «нет», поэтому я думаю, что проблема заключается в том, что не удается правильно определить src изображения.

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

Ответ №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; }

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