Изменить класс 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 fine, страница никогда не обновляет CSS элемента. Вот моя последняя попытка:

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

      }); 
     } 
    ); 

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

Заранее благодарен!

Answer 1

Вы Селектор неправильно

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

     }); 
    } 
); 

Answer 2

Поскольку класс находится на текстовом поле непосредственно, ваши 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 3

С помощью селектора .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'); 
}); 

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

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

кода я в конечном итоге с помощью был:

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

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

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