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

Question

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

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

    .watermarkoff input
   {
        background-image: none;
   }

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

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

             });
         }
     );

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

Спасибозаранее!

Answer 1

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

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

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

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

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

Answer 2

Вы ошиблись селектором

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

         });
     }
 );

Answer 3

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

Код, который я использовал, был:

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

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

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

Answer 4

Исходя из ваших CSS и jQuery, это то, что вы хотите делать:

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

         });
     }
 );

Проблема в том, что input не имеет .watermarkon или .watermarkoff в таблице стилей и ничего не отображается так, как вы ожидаете.

Answer 5

С помощью селектора .watermarkon input вы пытаетесь выбрать все входные элементы внутри другого элемента, который имеет класс watermarkon.

Также, если вы удалите класс watermarkon, вы не сможете выбратьэлемент снова с селектором, который включает .watermarkon.

Так что попробуйте сделать это так:

HTML:

<input type="text" class="watermark"/>

CSS:

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

jQuery:

$('input').click(function() {
    $(this).removeClass('watermark');
});