使用JQuery \ Watermark更改css类

Question

我的应用程序试图在表单的文本框中显示文本水印，但我不想触及框的实际值。所以，我尝试使用一个带有水印文本的背景图像，使用类；

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

    .watermarkoff input
   {
        background-image: none;
   }

我在表单中设置了textboxes 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

你的选择器是错的

 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，并在使用.toggleClass()交换类时恢复模糊时的watermarkon。

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');
});