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

56

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

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

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

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

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

<code>function resetClass()
{
   jQuery('#currentColor').removeClass('testThing');
   jQuery('#currentColor').addClass('testThing');
}
</code>

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

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

Вам не нужно использовать jQuery (...), вы можете просто использовать $ (..) Gab Royer
Вы делаете это, если используется несколько библиотек, таких как Microsoft ajax или прототип. Я просто делаю это на случай, хотя, скорее всего, я буду использовать только jquery. Programmin Tool

Ваш Ответ

4   ответа
4

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

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

Я не уверен, что понимаю ваш комментарий. Я сказал то же самое, что и вы: это полезно, когда вы хотите изменить более одного свойства CSS одновременно.
Извините, я прочитал свой комментарий еще раз и нашел ошибку. Это 's', почему это не окончательный ответ '. Не "почему это ...".
Я не понимаю, почему это окончательный ответ. Я нашел этот ответ полезным, когда у нас есть сложный CSS, который можно применять только для определенных условий, которые необходимо сбросить сразу после.
76

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

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

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

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

function reset(this)
{
  $(this).removeAttr('style');
}
Ну, это очищает каждую модификацию, сделанную с помощью Jquery, а это именно то, что он хотел здесь. Он все еще мог использовать первый, хотя.
это работает, только если у вас нет других настроек стиля, которые вы хотите сохранить
помните, что removeAttribute () больше не работает для jquery, вместо этого используйте removeAttr ()!
Но это удаляет любые стили на элементе, фактически делая его белым! ОП спросил, как восстановить первоначальный стиль. Почему бы временно не сохранить оригинальный стиль в поддельном идентификаторе элемента и не восстановить его позже? Что если элемент является альтернативной строкой в виде сетки, которая имеет разные цвета для каждой второй строки?
Ударь меня к этому. удаление.
109

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

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

// reset
$(this).css('background-color', '');
Второй вариант кажется мне наиболее смысловым.
Спасибо - только то, что мне было нужно :)
вау, я не могу поверить, что это сработало! лол
Спасибо, Jscheel! Это работает очень хорошо и не разрушает другие (ранее существующие) стили.
Мне нравится это решение!
2

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

Я должен согласиться, что это как бы нарушает правила.
Вы всегда можете использовать! Важное, чтобы убедиться, что атрибуты вашего нового класса взяты.
AND -! Важный несовместим с некоторыми современными браузерами :(
нет, я не люблю использовать это, побеждает цель CSS IMO

Похожие вопросы