用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。

登錄div稱為#loginPage，其下面的div稱為#loginTest

Answer 1

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

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

也有fadeIn ， fadeOut ， slideUp ， slideDown來處理元素的顯示/隱藏。 您甚至可以使用animate來定義自己的過渡。 在這種情況下， API始終是您的朋友。

Answer 2

要顯示和隱藏任何特定的HTML元素，可以使用該元素的show（）和hide（）函數。 最初，您可以隱藏您的loginTest div，而僅顯示loginPage div。

嘗試這個：

function (response) { 
                if (response.success) { 
                    $(#loginPage).hide(); //Hiding login page div
                    $(#loginTest).show(); //Showing login test div
                    alert("Your login worked");
                    $('#loginTest').html(e);
                } else {
                    alert("Your login failed");
                }

您還可以增加顯示和隱藏DIV的時間。 像$(#loginPage).hide("fast"); 和$(#loginTest).show("slow"); 。 這完全取決於您的需求。