javascript - 使用javascript动态显示和隐藏div

Question

我的登录系统目前有以下代码:

function handleLogin() {
    var e = $("#username").val();
    var p = $("#password").val();

    if(e != "" && p != "") {
        $.ajax({ 
            type: 'POST', 
            url: 'http://localhost/php/log.php', 
            crossDomain: true,
            data:  {username: e, password :p},
            dataType: 'json', 
            async: false,
            success: function (response) { 
                if (response.success) { 
                    alert("Your login worked");
                    $('#loginTest').html(e);
                } else {
                    alert("Your login failed");
                }
            },
            error: function(error) {
                alert('Could not connect to the database' + error);
            }
        }); 
    } else {
        alert("You must enter username and password");
    }
    return false;
}

登录成功后，我收到了正确的警报，但随后我希望隐藏登录 div，并在其下方的 div 中显示用户名 (e)。

所以基本上我只需要弄清楚如何隐藏当前的 div，然后显示另一个。

登录div 称为#loginPage，它下面的div 称为#loginTest

Answer 1

您可以使用hide() 和show():

if (response.success) { 
    $('#loginPage').hide();
    $('#loginTest').show().html(e);
} 

还有fadeIn,fadeOut,slideUp,slideDown处理元素的显示/隐藏.您甚至可以使用 animate 来定义您自己的过渡。 API在这些情况下永远是你的 friend 。