使用 JQuery \ Watermark 更改 css 类

Question

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

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

    .watermarkoff input
   {
        background-image: none;
   }

我在表单中设置文本框 CssClass="watermarkon"，当单击这样的元素时，我想删除“watermarkon”并替换为“watermarkoff”，甚至只是删除现有的类。我在语法上尝试了很多不同的尝试，尽管我可以很好地捕获单击事件，但页面似乎从未更新元素的 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.watermarkon
//and...
input.watermarkoff

还有更简单的 jQuery 来匹配：

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

您通常希望更改 focus 和 blur 上的水印样式（需要进行额外的检查，具体取决于您的操作），而不是单击。正在追赶）。这将在聚焦时将类更改为 watermarkoff，并在使用 watermarkon "nofollow noreferrer">.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');
             });
         }
     );

我认为它实际上是有效的，因为修复了我在原始代码中对双引号和单引号的错误使用？

再次感谢所有的回复！