Javascript点击图片用点击的src替换另一张图片答案

【问题标题】：Javascript click image to replace another image with the clicked srcJavascript点击图片用点击的src替换另一张图片
【发布时间】：2022-07-25 22:03:43
【问题描述】：

我正在尝试做一个简单的操作，在顶部加载一个大图像，在底部有一排较小的画廊图像，以便单击较小的图像会将其放入较大的顶部容器中。

我在我的网站中使用 PHP 加载的 url，所以我在这里用占位符图像替换了它们，但问题仍然存在，我很确定这与我在我的 javascript 中声明 css 工作的方式有关因为点击小图像肯定会执行操作，但源似乎没有加载。

我到底搞砸了什么？

    $('.gallery__source').on('click', function(){
        console.log('clicked');
        var src = $(this).children('img').attr('src');  
        $('.itempage_wrapper_plain').css('background-image','url(src)');
    });

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<div class="itempage_wrapper_plain" style="background-image:url('https://loremflickr.com/320/240/dog'); border-radius: 25px 0px 0px 0px; height:300px; width:300px;">
</div>

<div class="gallery__source">
    <img style="padding:10px;" src="https://loremflickr.com/320/240">
</div>

【问题讨论】：

标签： javascript html css

【解决方案1】：

这实际上并没有使用src 变量：

'url(src)'

这只是一个字符串文字。您可以连接变量：

'url(' + src + ')'

或者使用模板文字：

`url(${src})`

【讨论】：

【解决方案2】：

$(".gallery__source").on("click", function() {
  console.log("clicked");
  var src = $(this)
    .children("img")
    .attr("src");
  $(".itempage_wrapper_plain").css("background-image", "url(" + src + ")"); // this needs to change to string concatenation
});

【讨论】：