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");一样。这完全取决于你的需求。

使用javascript动态显示和隐藏div

2 个答案: