使用JQuery \ Watermark更改css类

我的应用程序试图在表单上的文本框中显示文本水印，但我不想触摸该框的实际值。所以，我试图使用具有水印文本的背景图像，使用类;使用JQuery Watermark更改css类

.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改变而更新直播网页？

提前致谢！

来源

2010-08-31 Schmitty23

您正在使用错误的选择器。 Alex的回答是对的。 – Kangkan 2010-08-31 14:18:04

您选择是错误的

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

     }); 
    } 
);

来源

2010-08-31 14:16:31

jQuery不支持没有标签名称的类选择器，所以选择器“.watermarkon”没有错。 – slikts 2010-08-31 14:18:18

@Reinis - 虽然OP没有使用“.watermarkon”，但是他使用了“”的后代选择器。 – 2010-08-31 14:19:45

@Reinis：1.jquery支持没有标签名称的类选择器。我没有使用一个。 – 2010-08-31 14:20:03

由于类是在文本框中直接，你的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。

来源

2010-08-31 14:17:32

是的，尼克再次为他的华丽解决方案:) – davehauser 2010-08-31 14:24:55

使用选择器.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'); 
});

来源

2010-08-31 14:23:13 davehauser

根据您的CSS和jQuery，这是你想要做的事情：

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

     }); 
    } 
);

的问题是，input没有.watermarkon或.watermarkoff在样式表中，并没有显示为你指望它。

来源

2010-08-31 14:23:14

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

我最终使用的代码是：

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

而且我认为它实际上工作，因为我修错=使用双VS单引号的原代码？

再次感谢所有回复！

来源

2010-08-31 14:57:36 Schmitty23

使用JQuery \ Watermark更改css类

回答

相关问题