使用 JQuery \ Watermark 更改 css 类答案

【问题标题】：Change css class with JQuery \ Watermark使用 JQuery \ Watermark 更改 css 类
【发布时间】：2010-08-31 14:12:57
【问题描述】：

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

    .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 更改来更新实时网页？

提前致谢！

【问题讨论】：

您使用了错误的选择器。亚历克斯的回答是正确的。

标签： jquery css class addclass removeclass

【解决方案1】：

你的选择器错了

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

         });
     }
 );

【讨论】：

jQuery确实支持没有标签名的类选择器，所以选择器“.watermarkon”没有错。
@Reinis - 虽然 OP 没有使用 ".watermarkon"，但他正在使用 <input> 的后代选择器。
@Reinis: 1.jquery 确实支持没有标签名称的类选择器。 2.我没用过。

【解决方案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。

【讨论】：

是的，再次为尼克 +1 以感谢他的巧妙解决方案 :)

【解决方案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');
});

【讨论】：

【解决方案4】：

根据您的 CSS 和 jQuery，这就是您想要做的：

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

         });
     }
 );

问题是input 在样式表中没有.watermarkon 或.watermarkoff，并且没有按您的预期显示。

【讨论】：

【解决方案5】：

感谢大家的帮助，我是 JS 和 JQuery 的新手，还不太了解对象和继承。我查看了所有答案并尝试了很多方法。在我的特定应用程序中，我们必须使用 .输入，因为我正在使用自定义编程的 asp.net 控件，如果缺少“输入”，CSS 将无法在文本框上工作。

我最终使用的代码是：

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

而且我认为它确实有效是因为修复了我在原始代码中误用双引号和单引号的问题？

再次感谢所有回复！

【讨论】：