JQuery: временно изменить стиль, а затем сбросить до исходного класса

Question

Скажем, у меня есть класс с именем testThing:

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

И я хочу иметь возможность проверить изменение цвета фона на любой элемент управления этого класса по нажатию кнопки:

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

Но я хочу, чтобы пользователь мог восстановить исходный цвет (еще одно нажатие кнопки) в зависимости от того, что имеет класс:

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

Похоже, что это будет работать (Albiet не лучший способ сделать это), но цвет фона элемента управления не сбрасывается до исходного значения, содержащегося в этом классе.

Теперь либо мне нужно выяснить, почему удаление, которое нужно добавить, не сбрасывает его, ИЛИ просто лучший способ сделать это ... видя, как глупо удалять и читать класс ...

Answer 1

Я знаю, что это старый, но вы можете просто установить значение в пустую строку, чтобы удалить свой собственный стиль, например так:

// set
$(this).css('background-color', '#000000');

// reset
$(this).css('background-color', '');

Answer 2

Jquery добавляет CSS в атрибут style, который имеет более высокий приоритет по сравнению с тем, что находится в вашем файле CSS. Вы не изменяете свой CSS-документ с помощью этой функции, поэтому добавление, удаление и добавление класса не имеют никакого эффекта, поскольку он вообще не был изменен!

Вы должны использовать ту же функцию, но на этот раз установить цвет фона на черный.

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

Или просто удалите атрибут стиля

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

Answer 3

А как насчет toggleClass("testThing")? Я использую его, когда нужно изменить несколько свойств.

http://api.jquery.com/toggleClass/

Answer 4

Лучше просто добавить другой класс, который переопределяет стиль, который вы хотите изменить, а затем удалить его. Это бьет жесткую информацию о стиле кодирования внутри JS. Единственная проблема заключается в том, что вы должны убедиться, что добавленный класс имеет более высокий порядок, так что элемент берет стиль из него, а не из существующего класса, но это несложно обеспечить.