Question

Say I have a class named testThing:

.testThing
{
   background-color:#000000;
   float:left;
   height:50px;
   width:50px;
}

And I want to be able to test a background color change to whatever control is of that class on a button click:

function setColor(someColor) 
{
   jQuery('.testThing').css('background-color', someColor);
}

But I want the user to be able to reset to the original color (another button click) based on what the class has:

function resetClass()
{
   jQuery('#currentColor').removeClass('testThing');
   jQuery('#currentColor').addClass('testThing');
}

Seems like this would work (Albiet not the best way to do this) but the control’s background color doesn’t reset to the original value held in that class.

Now either I need to figure out why that remove to add doesn’t reset it OR just a plain better way of doing it… seeing as it seems silly to remove and readd the class…

Answer 1

Jquery adds CSS in the style attribute which has higher priority over what is in your CSS file. You’re not changing your CSS document with that function and thus adding and removing and adding the class have no effect since it hasn’t been modified at all!

You should use the same function but set the background color to black this time.

function reset(this)
{
  $(this).css('background-color', '#000000');
}

Or simply remove the style attribute

function reset(this)
{
  $(this).removeAttr('style');
}