1

私のアプリケーションは、フォームのテキスト ボックスにテキストの透かしを表示しようとしていますが、ボックスの実際の値には触れたくありません。そのため、クラスを使用して、透かしテキストで背景画像を使用しようとしています。

    .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 を変更してライブ Web ページを更新できないのはなぜですか?

前もって感謝します！

4

5 に答える 5

1

セレクターが間違っています

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

         });
     }
 );
于 2010-08-31T14:16:31.900 に答える
1

クラスはテキストボックスに直接あるため、CSS セレクターは、要素を子としてinput持つのではなく、クラスを on にする必要がある<input>ため、次のように変更します。

input.watermarkon
//and...
input.watermarkoff

そして、一致するようにもう少し単純化されたjQuery：

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

クリックではなく、通常は透かしのスタイルをfocusとで変更しますblur(目的に応じて追加のチェックを行います)。これにより、フォーカス時にクラスが変更され、クラスをスワップすることでぼかし時watermarkoffに復元されます。watermarkon.toggleClass()

于 2010-08-31T14:17:32.443 に答える
0

Thanks to everyone for their help, I'm new to JS and JQuery and don't understand objects and inheritances well yet. I looked at all answers and tried a number of things. In my particular app, we have to use . input as I am working with custom programmed asp.net controls and if the "input" is missing, the CSS won't work on text boxes.

The code I ended up using was:

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

And I think it actually worked because of fixing my mis=use of double vs single quotes in the original code?

Thanks again for all of the replies!

于 2010-08-31T14:57:36.427 に答える
0

セレクターを使用.watermarkon inputすると、 class を持つ別の要素内のすべての入力要素を選択しようとします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-31T14:23:13.223 に答える
0

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-31T14:23:14.303 に答える