以下のコードでユーザーがテキストに入力して、入力の有無をバリデーションするために、blurのタイミングでdiv classのidを変更するとともに、spanの中のテキスト内容を変更する仕組みを作成しております。CSSは多いため割愛いたしますが、「入力必須」と「OK」を囲む吹き出しのデザインでtips-beforeでは赤色で「入力必須」が表示されており、tips-afterでは緑色でOKが表示されるとご理解ください。
(ご質問)
tips-beforeとtips-afterと入れ替わるたびに吹き出しをanimationでfadeinさせて動きをつけてあげたいのですが、
if (!textContent=="") {
$('#titleval').attr("class","tips-after");
$('#titleval span').text("OK");
$('.tips-after').fadeIn('slow');
}
としても、動きはついてはくれません。
appendToで構造等は変えたくないため、attrでclass属性をスイッチすることでcssとテキストを変更し、これに動きをつけるうまい方法はありますでしょうか?
よろしくお願い申し上げます。
HTML
1<div id="titleval" class="tips-before"> 2 <input type="text" name="name" id="title" placeholder="タイトル"> 3 <span>入力必須</span> 4 </div> 5 6CSS 7
Javascript
1$(function(){ 2$('#title').blur(function(){ 3var textContent=$(this).val(); 4 5if (!textContent=="") { 6 $('#titleval').attr("class","tips-after"); 7 $('#titleval span').text("OK"); 8} 9 10if (textContent=="") { 11 $('#titleval').attr("class","tips-before"); 12 $('#titleval span').text("入力必須"); 13} 14}) 15});
回答1件
あなたの回答
tips
プレビュー