頁面加載后Div消失

Question

我是jQuery和JavaScript的新手，但是我只停留在一點，所以我需要坐在那里的聰明人的建議。 我在用戶登錄之前向用戶顯示了div。

<div id="login" class = "login">
<ul>
  <li><a href="signup.html">Login</a></li>
</ul>
</div>

我想用另一個div替換此div，在用戶成功登錄后，該div最初是隱藏的。

將Div替換為：

<div id="welcomelogin" class = "login" style="display: none;">
<ul>
  <li><a href="profile.html">Welcome abc</a></li>
</ul>
</div>

我正在jQuery中執行以下操作（現在，我已經硬編碼了用戶名/密碼值，只是為了解釋我的問題）。

我在登錄按鈕單擊時調用身份驗證功能。 用戶單擊登錄按鈕后，我希望重新加載頁面並將#login div替換為#welcomeLogin div，以便向用戶顯示新的url。 但是問題是#welcomeLogin div確實顯示了幾秒鍾，然后消失了，因為我有location.reload了。

我也希望頁面在身份驗證成功后重新加載，然后顯示#welcomeLogin div直到會話保留。 所有這些都在$( document ).ready();之外完成$( document ).ready();

function auth() {
    var userName = $("#login-username").val();
    var password = $("#login-password").val();

    if (userName == 'abc@xyz.com' && password == '12345') {
        location.reload();
        $("#login").hide();
        if (sessionStorage) {

            $("#welcomeLogin").show();
        }
    }
}

Answer 1

調用location.reload() ，頁面將刷新。 這意味着客戶端上的其他任何內容（即，任何程序化的javascript）都可能有時間運行，但這僅是因為瀏覽器需要花費一些時間來刷新頁面。

您可以在頁面加載時調用此javascript函數，並監視某種狀態，如果您希望表面上“持久化” DOM（例如div交換）到頁面的下一個“版本”。

我想采用一種推薦的（替代）方式在javascript中進行后續操作，但是老實說，我不確定這絕對不是用於身份驗證的最佳方法。

我會推薦一個表單發布，並且已經有可用的組件來實現基於表單的身份驗證，具體取決於您在服務器上擁有的身份。

Answer 2

刷新頁面后，一切都會從頭開始。 然后，您的auth函數將停止，並重新加載每個js文件。