CODEWITHSUNDEEP
javascriptjquery
XML guy
XML guy

Reputation: 399

Jquery and CSS background change

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)";      
});

Upvotes: 2

Views: 982

Answers (3)

Grant Thomas
Grant Thomas

Reputation: 45083

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)");        
});

Upvotes: 4

Gary Green
Gary Green

Reputation: 22395

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/

Upvotes: 2

Gabriel Guimarães
Gabriel Guimarães

Reputation: 2744

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/

Upvotes: 1

Related Questions