jquery - 使用 jquery 更改背景图像

Question

我将有一个图像列表(平铺背景类型) 我希望能够单击图像并将其作为整个 body 的背景图像以供显示。到目前为止我有这个:

$(document).ready(function(){       

    //var image = ???; what should be here?

    $('.img1').click(function(){
        $('#body').css('background-image', 'url(images/tiles/tile77.jpg'); //the image url cannot be one single url
        });   

    });   

我当前的图像行(只是用来让脚本工作。图像稍后将来自数据库。

<div class="threecol"><img class="img1" src="images/tiles/tile39.jpg"></div>
<div class="threecol"><img class="img1" src="images/tiles/tile77.jpg"></div>
<div class="threecol"><img class="img1" src="images/tiles/tile47.jpg"></div>
<div class="threecol last"><img class="img1" src="images/tiles/tile33.jpg"></div>

脚本按照我的方式工作，但我需要背景图像是我单击的图像，而不是我这里的静态图像。每次单击图像时我都需要它工作。

我承认，我对如何让它一次又一次地工作以及如何将 .css(background-image, ??????) 处的脚本配置为动态的一无所知

谢谢你的建议

Answer 1

获取您刚刚触发点击事件的 .img1 元素的 src 属性，并将其设置为您对 body 元素的 CSS 修改中的 URL:

$('.img1').click(function(){
    $('body').css('background-image', 'url(' + this.src + ')');
});

此外，您的文档中应该只有一个 body 元素，因此无需通过 ID 选择它，只需使用 $('body') .