页面加载后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文件。