无法使用变量使用jQuery设置'background

无法使用变量使用jQuery设置'background-image'(Can't set 'background-image' with jQuery using a variable)

我正在尝试使用jQuery设置DIV的背景图像。 图像的路径存储在变量中。 我已经使用控制台+复制/粘贴验证了图像的路径是有效的。

这是代码：

var bg = $('.temp-canvas', this).attr('data-background'); $(this).css('background-image', 'url('+bg+')');

使用$（this）是因为它在.each（）循环中运行。

此代码不会向DIV添加任何内容。 在代码中，用存储在bg变量中的字符串替换'+ bg +'就像魅力一样。 我至少期望代码会添加style =“background-image：url（'invalid_path'）”但没有添加任何内容。 我简直莫名其妙！

I'm trying to set the background image of a DIV with jQuery. The image's path is stored in a variable. I have verified that the image's path is valid using the console + copy/paste.

Here's the code:

var bg = $('.temp-canvas', this).attr('data-background'); $(this).css('background-image', 'url('+bg+')');

$(this) is used because this is run in a .each() loop.

This code adds nothing to the DIV. Replacing, in the code, '+bg+' by the string stored the bg variable works like a charm. I would at least expect the code would add style="background-image:url('invalid_path')" but nothing is added. I'm simply baffled!

最满意答案

编辑：在这里工作演示http://jsfiddle.net/vnf6D/

创建一个包含您想要的第二张照片的类。

.canvas { background-image: url(your-image.jpg); }

然后在jquery上添加你想要的事件

$(document).ready(function(){ $(".temp-canvas").click(function(){ $(this).addClass("canvas2"); }); });

EDIT: working demo here http://jsfiddle.net/vnf6D/

create a class which includes the second photo you want to have.

.canvas { background-image: url(your-image.jpg); }

then add this class with the event you wish on jquery

$(document).ready(function(){ $(".temp-canvas").click(function(){ $(this).addClass("canvas2"); }); });无法使用变量使用jQuery设置'background-image'(Can't set 'background-image' with jQuery using a variable)

我正在尝试使用jQuery设置DIV的背景图像。 图像的路径存储在变量中。 我已经使用控制台+复制/粘贴验证了图像的路径是有效的。

这是代码：

var bg = $('.temp-canvas', this).attr('data-background'); $(this).css('background-image', 'url('+bg+')');

使用$（this）是因为它在.each（）循环中运行。

此代码不会向DIV添加任何内容。 在代码中，用存储在bg变量中的字符串替换'+ bg +'就像魅力一样。 我至少期望代码会添加style =“background-image：url（'invalid_path'）”但没有添加任何内容。 我简直莫名其妙！

I'm trying to set the background image of a DIV with jQuery. The image's path is stored in a variable. I have verified that the image's path is valid using the console + copy/paste.

Here's the code:

var bg = $('.temp-canvas', this).attr('data-background'); $(this).css('background-image', 'url('+bg+')');

$(this) is used because this is run in a .each() loop.

This code adds nothing to the DIV. Replacing, in the code, '+bg+' by the string stored the bg variable works like a charm. I would at least expect the code would add style="background-image:url('invalid_path')" but nothing is added. I'm simply baffled!

最满意答案

编辑：在这里工作演示http://jsfiddle.net/vnf6D/

创建一个包含您想要的第二张照片的类。

.canvas { background-image: url(your-image.jpg); }

然后在jquery上添加你想要的事件

$(document).ready(function(){ $(".temp-canvas").click(function(){ $(this).addClass("canvas2"); }); });

EDIT: working demo here http://jsfiddle.net/vnf6D/

create a class which includes the second photo you want to have.

.canvas { background-image: url(your-image.jpg); }

then add this class with the event you wish on jquery

$(document).ready(function(){ $(".temp-canvas").click(function(){ $(this).addClass("canvas2"); }); });