Jquery and CSS background change

Question

I am having problem with the following line:

document.getElementById("giftcard").getElementsByTagName("label").style.backgroundImage ="url(giftcard_icon-d.jpg)";

I am trying to change background image after clicking a label.

I do have 5 labels in a page, but when i click on label, the background should change it. Other labels should be reset to use this giftcard_icon-d.jpg image as their background.

How can I fix this?

$(document).ready(function() {
    $('#giftcard label').click(function() {
       document.getElementById("giftcard").getElementsByTagName("label").style.backgroundImage ="url(giftcard_icon-d.jpg)";
       this.style.backgroundImage ="url(giftcard_icon-a.jpg)";      
});

What is happening exactly? Background changes for none of them??? — Jatin Ganhotra
– Jatin Ganhotra, Commented Apr 27, 2011 at 20:27

Grant Thomas · Accepted Answer · 2011-04-27 20:41:50Z

4

If you're using jQuery, this ought to do the trick:

$(document).ready(function() {
    $('#giftcard label').click(function() {
        $("#giftcard label").css("background-image", "url(giftcard_icon-a.jpg)");
    });
});

But it also depends on whether the ID is correct, a label is present and that the image URL is valid.

For multiple label's you should be OK with a selector:

$("#giftcard > label").css("background-image", "url(giftcard_icon-a.jpg)");

To update after concluding exactly what it was you wanted:

$('#giftcard label').click(function() {
    $("#giftcard label").css("background-image", "url(giftcard_icon-d.jpg)");
    $(this).css("background-image", "url(giftcard_icon-a.jpg)");        
});

edited Apr 27, 2011 at 20:41

answered Apr 27, 2011 at 20:27

Grant Thomas

45.1k10 gold badges88 silver badges129 bronze badges

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

2 Comments

XML guy Over a year ago

Perfect! it works now. I used this way : '$('#giftcard label').click(function() { $("#giftcard label").css("background-image", "url(giftcard_icon-d.jpg)"); this.style.backgroundImage ="url(giftcard_icon-a.jpg)"; }); '

Grant Thomas Over a year ago

Yeah, I worked out properly what you wanted after I posted - I'll add it to the answer.

Gary Green · Accepted Answer · 2011-04-27 20:39:07Z

2

Firstly your mixing vanilla javascript and jquery here, seems a bit silly. If you want to alter the other labels to "reset" them you can do something like this:

 $(document).ready(function() {

  $('#giftcard').delegate('label', 'click', function() {

    $(this).css('background', 'url(giftcard_icon-d.jpg)');

    $('#giftcard > label').not(this)
     .css('background', 'url(giftcard_icon-a.jpg)');

  }); 

});

fiddle: http://jsfiddle.net/garreh/GUFtx/

edited Apr 27, 2011 at 20:39

answered Apr 27, 2011 at 20:33

Gary Green

22.4k6 gold badges52 silver badges76 bronze badges

Comments

Gabriel Guimarães · Accepted Answer · 2011-04-27 20:35:47Z

1

If I understood it correctly this should do the trick

$(function() {
    $('#giftcard label').click(function() {
        $('#giftcard label').css("background-image", "url(giftcard_icon-d.jpg)");
        $(this).css("background-image", "url(giftcard_icon-a.jpg)");
    });
});

working sample http://jsfiddle.net/FvNdR/

answered Apr 27, 2011 at 20:35

Gabriel Guimarães

2,7443 gold badges27 silver badges42 bronze badges

1 Comment

Gabriel Guimarães Over a year ago

@XML guy I Guess your doubt was just on how to set the style properties on jquery, when @Mr. Disappointment posted his answer you got the idea and solved by yourself.

Collectives™ on Stack Overflow

Jquery and CSS background change

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related