jQuery - dynamically changing CSS

Question

I want to dynamically change the CSS for a specific element. The following hard coded jQuery statement works:

$('.people div[data-face="1"] i').css('background-image', 'url(http://localhost:58888/_pictures/picture_000.jpg)');

However, I need "1" to be a variable ("dataNum") and the actual url needs to be a variable called "URL".

I've been trying various escape characters, but can't get it to work without errors. Here's my latest:

 $("\'.people div[data-face=\" " + dataNum + '\"] i\').css(\'background-image\', \'url(' + URL + ')\' ');

What am I missing? Thanks.

SLaks · Accepted Answer · 2011-10-27 23:20:01Z

2

jQuery selectors are not magic; they're just ordinary strings.
You don't need to escape anything.

Instead, you just need ordinary string concatenation.

answered Oct 27, 2011 at 23:20

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nicosantangelo · Accepted Answer · 2011-10-27 23:23:22Z

1

You can do it with string concatenation like:

$('.people div[data-face="' + dataNum + '"] i').css('background-image', 'url('+URL+')');

answered Oct 27, 2011 at 23:23

nicosantangelo

13.8k3 gold badges35 silver badges47 bronze badges

Comments

Esailija · Accepted Answer · 2011-10-27 23:21:09Z

0

Try

$('.people div[data-face="'+dataNum+'"] i').css('background-image', 'url(\''+URL+'\')');

answered Oct 27, 2011 at 23:21

Esailija

140k24 gold badges280 silver badges328 bronze badges

Comments

jfriend00 · Accepted Answer · 2011-10-27 23:21:40Z

0

It's just string math (concatenation) for dataNum and a straight substitution for the url variable:

$('.people div[data-face="' + dataNum + '"] i').css('background-image', url);

or if you want to see the string math broken down in more detail:

var selector = '.people div[data-face="';
selector += dataNum;
selector += '"] i';
$(selector).css('background-image', url);

answered Oct 27, 2011 at 23:21

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Comments

kojiro · Accepted Answer · 2011-10-27 23:22:03Z

0

$('.people div[data-face="' + dataNum + "'"] i').css('background-image', 'url(' + URL + ')');

answered Oct 27, 2011 at 23:22

kojiro

77.8k20 gold badges151 silver badges217 bronze badges

Comments

Marian Bazalik · Accepted Answer · 2011-10-27 23:24:29Z

0

You do not really need escaping, following code should work:

$('.people div[data-face="'+dataNum+'"] i').css('background-image', 'url('+URL+')');

answered Oct 27, 2011 at 23:24

Marian Bazalik

1,4051 gold badge14 silver badges31 bronze badges

Collectives™ on Stack Overflow

jQuery - dynamically changing CSS

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related