点击图片的点击后背景图片更改

时间:2012-10-01 20:34:59

标签: jquery

我正在尝试更改单击时的背景图像。而不是使用bg图像的设置值更改为,我希望图像被更改为单击的图像的URL。

我已经创建了一个jsfiddle,其中包含了我的想法。它显示了我目前所处的位置。它位于:http://jsfiddle.net/CompMike/j8JZ3/27/

这是我试过的jQuery,但它不起作用。我对此很新。 switchfg 是一个内部带有透明图像的div。它将背景图像设置为默认值。 switchbg 是同一页面上的图像列表。单击其中一个时,我需要将该图像设置为div switchfg 的背景。任何帮助将不胜感激。 http://jsfiddle.net/CompMike/j8JZ3/27/

jQuery(document).ready(function() {

var switchfg = jQuery('.light-switch');
var switchbg = jQuery('.switchbg img');

switchbg.on("click", function() {
    var img = $(this).attr('src');
    switchfg.css('background-image', function() {
        'url(' + img + ');' 
    });
   });
});​

2 个答案:

答案 0 :(得分:2)

你必须直接设置背景(没有函数),如下所示:

switchfg.css('background-image', 'url(' + img + ')');

要查看背景,您还需要为.light-switch div提供宽度和高度。

答案 1 :(得分:1)

我为你的剧本做了更新:​​

http://jsfiddle.net/j8JZ3/35/

首先,代码中有一些混乱 - 函数()在$ .css()中。刚删除它。

但真正的问题是你在CSS文件中声明了

background: url(....)

在JavaScript中你想改变:

background-image: .....

所以我将两者都更改为background: url(....)并且它有效。