单击图像的 url 时背景图像发生变化答案

【问题标题】：Background image change on click of to url of clicked image单击图像的 url 时背景图像发生变化
【发布时间】：2012-10-01 20:34:59
【问题描述】：

我正在尝试更改点击时的背景图片。我希望将图像更改为单击的图像的 url，而不是使用要更改的 bg 图像的设置值。

我创建了一个 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 + ');' 
    });
   });
});

【问题讨论】：

您忘记返回新的后台 url。应该是return 'url(' + img + ')'; 并且你看不到背景图片中间的文字，因为 div 太小了。

标签： jquery

【解决方案1】：

你必须像这样直接设置背景（没有函数）：

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

要查看背景，您还需要为 .light-switch div 指定宽度和高度。

【讨论】：

感谢您回答我的问题。

【解决方案2】：

我为你的脚本做了更新：

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

首先，代码中有一些混乱 - $.css() 中的 function()。刚删了。

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

background: url(....)

在 JavaScript 中你想改变：

background-image: .....

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

【讨论】：

感谢您回答我的问题。