0

当用户名字段为空时,我正在尝试使用 jQuery 显示错误文本。这不是问题,因为我已经这样做了。问题是在错误文本显示后,我想单击用户名字段并隐藏错误文本 div,这样如果该字段仍然为空,我可以使用 jQuery 重新显示错误。

当我使用 jQuery 在 CSS 中将可见性设置为隐藏时,display: hidden当我在 Google Chrome 的检查器中查看代码时,它会自动添加一个。

代码在:http ://albsocial.net84.net/

<?php include ("php/head.php"); ?>
<div id="wrapper">

    <div id="container">

        <div id="intro">

            <h2><center>Are you a member? Login ...</center></h2>
            <h3><center>And enjoy hundreds of services.</center></h3>



            <div id="log_form">

                <form action="php/login.php" method="post" class="login_form">

                    <input type="text" size="25" name="log_uname"
                           id="login_txt" placeholder="Your Username">
                    <input type="password" size="25" name="log_password" id="login_pass" placeholder="Your Password">
                    <label id="check"><input type="checkbox" name="checkbox">         Remember Me</label>
                    <input type="submit" name="submit1" id="login_sub" value="LogIn">
                    <img id="loading1" src="images/ajax-loader.gif" alt="working.." />



                    <script>
                        $('#login_txt').click(function (e) {
                            e.preventDefault();
                            $('#error1').fadeOut('fast', function () {
                                $(this).css("visibility","hidden");
                            });
                        });             
                    </script>

                </form>

                <div id="error1"></div>
            </div>

            <div id="new_users">
                <h4 class="h4_users">New Users ...</h4>

                <a href="#"><img src="#" width="55" height="55"></a>
                <a href="#"><img src="#" width="55" height="55"></a>
                <a href="#"><img src="#" width="55" height="55"></a>
                <a href="#"><img src="#" width="55" height="55"></a>
            </div>

        </div>

        <div id="register">
            <h2><center>Sign up Below ...</center></h2>
            <h3><center>Easy, fast and free!</center></h3>

            <form action="php/register.php" method="post" name="form" class="form">
                <input type="text" size="25" name="fname" placeholder="First Name">
                <input type="text" size="25" name="lname" placeholder="Last Name">
                <input type="text" size="25" name="username" placeholder="Username">
                <input type="text" size="25" name="email" placeholder="Email">
                <input type="text" size="25" name="email2" placeholder="Repeat Email">
                <input type="password" size="25" name="password" placeholder="Password">
                <input type="password" size="25" name="password2" placeholder="Repeat Password">
                <input type="submit" name="submit" id="sub" value="Sign Up!">
                <img id="loading" src="images/ajax-loader.gif" alt="working.." />
            </form>
            <div id="error"></div>
        </div>
    </div>

    <?php include("php/footer.php"); ?>

以及我用来实际显示或创建错误代码的代码

$(document).ready(function(){

    $('.form').submit(function(e) {
        register();
        e.preventDefault();
    });

    $('.login_form').submit(function(e) {
        login();
        e.preventDefault();
    });

});

function register(){
    hideshow('loading',1);
    error(0);

    $.ajax({
        type: "POST",
        url: "php/register.php",
        data: $('.form').serialize(),
        dataType: "json",
        success: function(msg){
            if(parseInt(msg.status)==1){
                window.location=msg.txt;
            } else if(parseInt(msg.status)==0) {
                error(1,msg.txt);
            }
            hideshow('loading',0);
        }
    });
}

function login(){
    hideshow1('loading1',1);
    error1(0);

    $.ajax({
        type: "POST",
        url: "php/login.php",
        data: $('.login_form').serialize(),
        dataType: "json",
        success: function(msg1){
            if(parseInt(msg1.status1)==1){
                window.location=msg1.txt1;
            } else if (parseInt(msg1.status1) == 0) {
                error1(1,msg1.txt1);
            }
            hideshow1('loading1',0)
        }
    });
}
function hideshow(el,act){
    if(act) $('#'+el).css('visibility','visible');
    else $('#'+el).css('visibility','hidden');
}
function error(act,txt){
    hideshow('error',act);
    if(txt) $('#error').html(txt);
}
function hideshow1(el,act){
    if(act) $('#'+el).css('visibility','visible');
    else $('#'+el).css('visibility','hidden');
}
function error1(act,txt1){
    hideshow1('error1',act);
    if(txt1) $('#error1').html(txt1);
}
4

2 回答 2

1

尝试

$('#error1').fadeOut('fast', function () {
   $(this).show()
   $(this).css("visibility","hidden")    
})

因为 fadeOut 设置 display:none; 而且您还在使用可见性属性,摆脱可见性并改用 .show() 和 .hide()

于 2012-09-30T04:38:25.690 回答
0

做一个.css('display', 'none');.css('display', 'block')隐藏/显示应该可以正常工作。

另一种方法是将 设置为.html('')从 div 中删除文本(从而使其隐藏)。然后你就不需要担心 div 的可见性了。

于 2012-09-30T04:28:08.337 回答