jQuery 不想显示密码提示

Question

$(document).ready(function() {
     $(document).display(none);
     
     var password =("You have just entered a private website. Please enter the password to access it!");
     if (password == "biology") {
      $(document).display();
     }
      else {
       window.location.replace("https://www.google.co.uk")
      };
    });

html {
     background-image: url("bg.jpg")
    }
    
    body {
     margin: 0 25%;
     background-color: #ccc;
    }
    
    nav li {
     padding-left: 5px;
     border: solid 5px #aaa;
    }
    
    nav ul {
     list-style-type: none;
     position: fixed;
     left: 9%;
     font-size: 36px;
    }
    
    nav a {
     color: #ccc;
     text-decoration: none;
    }
    
    article {
     background-color: white;
     border: white solid #c0c;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html lang="pl">
    
    <head>
     <title>Krystian Mikołajczyk</title>
     <link href="style.css" rel="stylesheet" type="text/css">
     <link href="jquery-2.1.1.js" type="text/javascript">
     <link href="pass.js" type="text/javascript">
    </head>
    
    <body>
    <header>
     <h1 align="center"><i>Krystian Mikołajczyk</i></h1>
    </header>
    
    <nav>
     <ul><i>
      <li><a href="#">Home</a></li>
      <li><a href="#">Uploads</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">Contact</a></li>
     </i></ul>
    </nav>
    
    <br>
    <br>
    <br>
    
    <article>
     <section>
      <h1>Recent Update</h1>
     </section>
    </article>
    
    </body>
    </html>

我试图为自己制作一个可以随时随地使用的网站，我想用密码保护它，尤其是当我要下载和上传一些内容并想为自己保留时。

密码应该是"biology"，因为我希望我的生物老师在开发过程中为我上传一本pdf书。

我不知道我做错了什么，但是提示信息不想出现，这就是我想知道的。

Answer 1

tl;博士

您的代码中有一些错误。直接去working demo.

.display(none) 无效

$(document).display(none);

这是无效的，因为 none 不是定义的变量，请删除它或使用替代变量：

$(document).css('display', 'none');

或

$(document.body).hide();

您需要提示用户

var password = ("You have just entered a private website. Please enter the password to access it!");

这不会做任何事情，但您可以使用提示方法要求输入：

var password = prompt("You have just entered a private website. Please enter the password to access it!");

If-else 语句不应包含分号 (;)

else {
    window.location.replace("https://www.google.co.uk")
};

应该只是：

else {
    window.location.replace("https://www.google.co.uk")
}

可能还有更多！

检查您的开发者工具以确定。他们很棒！

备注

...您离安全还差得很远，因为您的密码以纯文本形式存储，并且可以通过查看客户端的源代码轻松找到。关于如何正确散列密码、存储它们并将它们与用户的散列输入值进行比较，有很多 material，但那是另一回事了。

Answer 2

$(document).display(none);

你是说 $(document).css('display', 'none');。但真的：

$(document.body).hide();

由于无法隐藏文档对象，hide()只是更具可读性。

您将 password 设置为一个长字符串：

var password =("You have just entered a private website. Please enter the password to access it!");

所以它永远不会等于 "biology"。我相信你的意思是：

var password = prompt("You have just entered a private website. Please enter the password to access it!");

最后，

$(document).display();

应该是：

$(document.body).show();

  $(document.body).hide();

  var password = prompt("You have just entered a private website. Please enter the password to access it!");
  if (password == "biology") {
    $(document.body).show();
  } else {
    window.location.replace("https://www.google.co.uk")
  };

html {
  background-image: url("bg.jpg")
}
body {
  margin: 0 25%;
  background-color: #ccc;
}
nav li {
  padding-left: 5px;
  border: solid 5px #aaa;
}
nav ul {
  list-style-type: none;
  position: fixed;
  left: 9%;
  font-size: 36px;
}
nav a {
  color: #ccc;
  text-decoration: none;
}
article {
  background-color: white;
  border: white solid #c0c;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
  <h1 align="center"><i>Krystian Mikołajczyk</i></h1>
</header>

<nav>
  <ul><i>
  <li><a href="#">Home</a></li>
  <li><a href="#">Uploads</a></li>
  <li><a href="#">Downloads</a></li>
  <li><a href="#">Contact</a></li>
 </i>
  </ul>
</nav>

<br>
<br>
<br>

<article>
  <section>
    <h1>Recent Update</h1>
  </section>
</article>

jQuery 不想显示密码提示

jQuery Prompt for Password doesn't want to display

html

css

jquery

password-protection

password-prompt

tl;博士

.display(none) 无效

您需要提示用户

If-else 语句不应包含分号 (;)

可能还有更多！

备注