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 
<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 回答
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

在你的css中，把属性：display: hidden;放在勾号和十字上。这将确保它们在您第一次加载页面时被隐藏。输入用户名后，fadeIn将根据您的需要设置显示。

于 2012-09-06T13:22:42.137 回答
0 
$(document).ready(function(){
$("#tick").hide();
$("#cross").hide();
});

如果您需要 jquery 或display:none在 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 回答