Question

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

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

代码位于：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);
}

Answer 1

尝试

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

因为fadeOut设置display：none;你也在使用visibility属性，摆脱可见性并使用.show（）和.hide（）代替

Answer 2

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

另一种方法是设置.html('')以从div中删除文本（从而使其隐藏）。然后你不必担心div的可见性。

PHP和jQuery显示：无

2 个答案: