jQuery: временно изменить стиль, а затем сбросить в исходный класс

скажем, у меня есть класс с именем 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 не лучший способ сделать это), но цвет фона элемента управления не сбрасывается до исходного значения, удерживаемого в этот класс.

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

4 56
css jquery

4 ответа:

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

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

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

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

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

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

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

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

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

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

4

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

2