使用jquery将div背景图像更改为特定图像

我对jquery几乎一无所知。了解HTML、PHP和CSS后，我可以稍微理解它并修改现有的脚本，但现在我遇到了麻烦

我正在尝试创建一个图像库，你可以点击一个图像，它会以全屏显示为背景。我遇到的问题是我无法改变背景

我尝试的是通过单击“更改器”来更改“背景”的背景图像。应该是新背景的图像是我放在函数中的DSC_2363

编辑：您可以在以下位置看到正在进行的页面：

我的CSS是这样的：

      .background{
        background-image: url(images/DSC_1418.JPG);
        background-size: cover;
        background-color: black;
        width: 100%; height: 100%;
        position: fixed; top: 0; left: 0;
      }

Jquery：

    $('.changer').click(function(image){
      $('.background').css("background-image", "url(images/".image.".JPG)");
    });

最后是HTML：

<div class="background">
</div>
<div class="content">
  <img class="changer" src="images/DSC_2363.JPG" width="30" onClick="function(DSC_2363)">
</div>

到

---

但是仍然不起作用。

您需要使用

+

而不是

来连接

Javascript中的字符串

$('.changer').click(function(image){
    $('.background').css("background-image", "url(images/" + image + ".JPG)");
});

在JavaScript中，我们使用
+
进行连接，而不是

$('.changer').click(function (image) {
    $('.background').css("background-image", "url(images/" + image + ".JPG)");
    //                                                     ^       ^
});


OP更新问题后更新代码

更改html添加
data image=“DSC_2363”
而不是onclick函数

<div class="content">
  <img class="changer" data-image = "DSC_2363" src="images/DSC_2363.JPG" width="30" >
</div>

试试这个：

 $('.changer').on('click',function(image){
      $('.background').css("background-image", "url(images/"+image+".JPG)");
    });

检查更新
<div class="content">
  <img class="changer" data-image = "DSC_2363" src="images/DSC_2363.JPG" width="30" >
</div>

$('.changer').click(function () {
    var image = $(this).data('image'); //get data-image attribute
    $('.background').css("background-image", "url(images/" + image + ".JPG)");
});

 $('.changer').on('click',function(image){
      $('.background').css("background-image", "url(images/"+image+".JPG)");
    });