Question

我将有一个图像列表（平铺背景类型）我希望能够点击图像并将其作为整个身体的背景图像以供显示。到目前为止我有这个：

$(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

获取刚刚触发click事件的src元素的.img1属性，并将其设置为CSS修改为body元素的URL：

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

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

用jquery改变背景图像

1 个答案: