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

你选择器错了

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

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

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

再次感谢所有回复！

使用JQuery \ Watermark更改css类

5 个答案: