使用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類

回答

相關問題