javascript - 页面加载后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 直到 session 保留。所有这些都是在 $( 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)可能有时间运行，但这只是因为浏览器刷新页面所需的时间。

如果您希望将 DOM 的某些更改(例如，div 的交换)“保留”到页面的下一个“版本”，您可以在页面加载时调用此 javascript 函数，并监视某种状态。

我想跟进在 javascript 中执行此操作的推荐(替代)方法，但老实说，我不确定这是身份验证的最佳方法。

我建议使用表单发布，并且已经有可用的组件用于实现基于表单的身份验证，具体取决于您服务器上的内容。