javascript - 使用 Jquery 隐藏和显示 div 不起作用

Question

我创建了一个表单和 JQuery Ajax 处理程序来处理登录。
在我的表单下，我创建了一个 bootstrap div 弹出窗口，告诉“用户名或密码不正确”。我想使用 JQuery $().hide() 隐藏它，如果用户名和密码不在数据库中，我的处理程序脚本将显示 div 弹出窗口。

这是 div 弹出窗口

<div id="error" class=" col-sm-3  mx-auto  mt-4 alert alert-danger alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  Password or username incorrect.
</div>

这是我的 JS 脚本

$(`div#error`).hide();
//handling login form.
$("#login-form").submit(function(e){
    if($('#user').val() != "" && $('#psw').val() != "" && $('#npsw').val() != "") {
        $.ajax({
           type: "POST",
           url: "login-process.php",
           data: $("#login-form").serialize(),
           success: function(response){
               $('#login-form')[0].reset();
               console.log(response);
               if (response == "True") {
                   window.location.href = "info.php";
               }
               else {
                       $(`div#error`).show();
               }
           }
         });
     }
     else {
         alert("Please fill the fields.")
     }
    e.preventDefault();
});

The problem: The div popup is showing on the page and it's not hidden. When I close it manually from the close button. Handler is not showing the div if the data is incorrect.

Answer 1

将错误 div 的页面加载时显示设置为无

<div id="error" class=" col-sm-3  mx-auto  mt-4 alert alert-danger alert-dismissible fade show" role="alert" style="display:none">