1

私はこのようなJS検証コードを持っています：

$(document).ready(function(){
    $('#username').keyup(username_check);
}); 

function username_check(){  
    var username = $('#username').val();
    if(username == "" || username.length < 4){
        $('#username').css('border', '3px #CCC solid');
        $('#tick').hide();
    }else{
        jQuery.ajax({
            type: "POST",
            url: "check_username.php",
            data: 'username='+ username,
            cache: false,
            success: function(response){
                if(response == 1){
            $('#username').css('border', '3px #C33 solid'); 
            $('#tick').hide();
            $('#cross').fadeIn();
                }else{
            $('#username').css('border', '3px #090 solid');
            $('#cross').hide();
            $('#tick').fadeIn();
                }
            }
        });
    }
}

HTMLコード：

<input type="text" name="username" id="username" class="input">
<img id="tick" src="images/tick.png" width="16" height="16"/>
<img id="cross" src="images/cross.png" width="16" height="16"/>

このコードは正常に機能していますが、検証前に画像を非表示にする必要があります。以下はスクリーンショットです。

ここに画像の説明を入力してください

4

5 に答える 5

2

これはJavaScriptで実行できますが、CSSを使用することをお勧めします。JavaScriptはページの最後に読み込まれます。つまり、JavaScriptが実行されると、画像が表示されてから消えます。

迅速で汚い方法は、次のことを行うことです。

<img id="tick" src="images/tick.png" width="16" height="16" style="display:none"/>
<img id="cross" src="images/cross.png" width="16" height="16" style="display:none"/>

しかし、次のようなCSSクラスを追加する方がよいでしょう。

<img id="tick" src="images/tick.png" width="16" height="16" class="hider"/>
<img id="cross" src="images/cross.png" width="16" height="16" class="hider"/>

次にCSSで：

.hider {
    display:none;
}
于 2012-09-06T13:22:52.817 に答える
0

cssに、属性：display: hidden;をティックとクロスの両方に配置します。これにより、最初にページを読み込んだときに確実に非表示になります。ユーザー名を入力すると、fadeInが必要に応じて表示を設定します。

于 2012-09-06T13:22:42.137 に答える
0

このロジックを試してください、

1）jQueryソースを変更します：

 $(document).ready(function(){
$('#username').keyup(username_check);
}); 
function username_check(){  
var username = $('#username').val();
if(username == "" || username.length < 4){
 $('#username').css('border', '3px #CCC solid');
 $('#tick').fadeIn("slow");
 $('#cross').fadeOut("slow");
}else{
jQuery.ajax({
   type: "POST",
   url: "check_username.php",
   data: 'username='+ username,
   cache: false,
   success: function(response){
if(response == 1){
    $('#username').css('border', '3px #C33 solid'); 
    $('#cross').fadeIn("slow");
    $('#tick').fadeOut("slow");
    }else{
    $('#username').css('border', '3px #090 solid');
     $('#tick').fadeIn("slow");
      $('#cross').fadeOut("slow");
         }
}
});
}
}

2）そしてHTMLソース：

 <input type="text" name="username" id="username" class="input">
        <img id="tick" src="images/tick.png" alt="Tick" style="display: none" width="16"
            height="16" />
        <img id="cross" src="images/cross.png" alt="Cross" style="display: none" width="16"
            height="16" />
于 2012-09-06T13:32:32.363 に答える
0 
$(document).ready(function(){
$("#tick").hide();
$("#cross").hide();
});

display:nonejqueryが必要な場合、またはcssで使用する場合は、これを使用できます。可視性：非表示; 完全なjqueryスクリプトも使用できます

<script>
$(document).ready(function(){
$("#tick").hide();
$("#cross").hide();
$('#username').keyup(username_check);
}); 
function username_check(){  
var username = $('#username').val();
if(username == "" || username.length < 4){
$('#username').css('border', '3px #CCC solid');
$('#tick').hide();
}else{
jQuery.ajax({
   type: "POST",
   url: "check_username.php",
   data: 'username='+ username,
   cache: false,
   success: function(response){
if(response == 1){
    $('#username').css('border', '3px #C33 solid'); 
    $('#tick').hide();
    $('#cross').fadeIn();
    }else{
    $('#username').css('border', '3px #090 solid');
    $('#cross').hide();
    $('#tick').fadeIn();
         }
}
});
}
}
</script>
于 2012-09-06T13:24:01.783 に答える
0 
<img id="tick" src="images/tick.png" width="16" height="16" style="display:none"/>
<img id="cross" src="images/cross.png" width="16" height="16" style="display:none"/>

$(document).ready(function(){
$('#username').keyup(username_check);
}); 
function username_check(){  
var username = $('#username').val();
if(username == "" || username.length < 4){
$('#username').css('border', '3px #CCC solid');
$('#cross').fadein();  //changed
}else{
jQuery.ajax({
type: "POST",
url: "check_username.php",
data: 'username='+ username,
cache: false,
success: function(response){
if(response == 1){
$('#username').css('border', '3px #C33 solid'); 
$('#tick').hide();
$('#cross').fadein();  //changed

}else{
$('#username').css('border', '3px #090 solid');
$('#cross').hide();
$('#tick').fadeIn();// changed
     }
}
});
}
}
于 2012-09-06T13:26:18.297 に答える