Изменить класс css с помощью JQuery \ Watermark

Question

Изменить класс css с помощью JQuery \ Watermark

Мое приложение пытается показать текстовый водяной знак в текстовом поле формы, но я не хочу касаться фактического значения коробки. Итак, я пытаюсь использовать фоновое изображение с текстом водяного знака, используя классы;

    .watermarkon input
   {
        background-image: url('../forms/images/TypeNameWatermark.png');
        background-repeat:no-repeat;
   }

    .watermarkoff input
   {
        background-image: none;
   }

Я устанавливаю текстовые поля CssClass = "watermarkon" в форме, и при щелчке по такому элементу я бы хотел удалить «водяной знак» и заменить его на «водяной знак» или даже просто удалить существующий класс. Я пробовал множество разных попыток синтаксиса, и хотя я могу нормально зафиксировать событие щелчка, страница, похоже, никогда не обновляет CSS элемента. Вот моя последняя попытка:

     jQuery(document).ready(
         function() {
             jQuery(".watermarkon input").click(function(event) {
                 jQuery(this).removeClass("watermarkon").addClass("watermarkoff");

             });
         }
     );

Кто-нибудь может сказать мне, что мне не хватает - почему я не могу получить изменение CSS для обновления действующей веб-страницы?

Заранее спасибо!

1

jquery css class addclass removeclass

задан Schmitty23 31 August 2010 в 14:12

3 ответа

Другие вопросы по тегам:

jquery css class addclass removeclass

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

score 1 · Answer 1

Вы выбрали неверный выбор

 jQuery(document).ready(
     function() {
         jQuery("input.watermarkon").click(function(event) {
             jQuery(this).removeClass("watermarkon").addClass("watermarkoff");

         });
     }
 );

score 1 · Answer 2

Поскольку класс находится непосредственно в текстовом поле, ваши селекторы CSS должны иметь класс на input, не имея дочернего элемента , поэтому измените их на этот :

input.watermarkon
//and...
input.watermarkoff

И немного более упрощенный jQuery для соответствия:

jQuery("input.watermarkon").bind("blur focus", function() {
  jQuery(this).toggleClass("watermarkon watermarkoff");
});

Вместо щелчка вы обычно хотите изменить стиль водяного знака на focus и blur (с дополнительными проверками, в зависимости от того, что вам нужно). Это изменит класс на watermarkoff при фокусировке и восстановит watermarkon при размытии с помощью .toggleClass() для замены классов.

score 0 · Answer 3

Спасибо всем за помощь, я новичок в JS и JQuery и еще плохо разбираюсь в объектах и наследовании. Я просмотрел все ответы и попробовал несколько вещей. В моем конкретном приложении мы должны использовать . ввод, так как я работаю с пользовательскими программными элементами управления asp.net, и если «ввод» отсутствует, CSS не будет работать с текстовыми полями.

В итоге я использовал следующий код:

     jQuery(document).ready(
         function() {
             jQuery('.watermarkon').click(function(event) {
             jQuery(this).removeClass('watermarkon').addClass('watermarkoff');
             });
         }
     );

И я думаю, что это действительно сработало из-за исправления моего неправильного использования двойных и одинарных кавычек в исходном коде?

Еще раз спасибо за все ответы!