Question

我几乎不了解jquery。知道HTML，PHP和CSS我可以理解它并改变现有的脚本，但现在我已经碰到了一堵砖墙。

我正在尝试创建图片库，您可以在其中点击图片，并将全屏显示为背景。我遇到的问题是我无法改变背景。

我尝试的是改变＆＃34;背景＆＃34;的背景图像。点击＆＃34; changer＆＃34;。应该是新背景的图像是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>

我知道这些问题已经存在，但这些都没有帮助我。希望有人能得到我想要的东西并且可以帮助我，谢谢！

编辑：已更改

 $('.background').css("background-image", "url(images/".image.".JPG)");

到

 $('.background').css("background-image", "url(images/"+image+".JPG)");

但仍无效。

Answer 1

您需要使用+代替.来连接Javascript

中的字符串

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

Answer 2

在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>

<强> JS

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

Answer 3

试试这个：

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

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

3 个答案: