如何使用 JavaScript 和“是/否”按钮来弹出年龄验证窗口？

Question

我对 JavaScript 不太熟悉，我正在尝试为 Square Space 网站设置年龄验证弹出窗口。我在使用“是/否”按钮功能时遇到问题，并且不知道如何使它们工作。这个想法是，当单击“是”时，弹出窗口就会消失，并且该选择将在该会话的其余部分中被记住。单击“否”后，该站点将退出。任何帮助是极大的赞赏。

我将以下代码粘贴到站点范围的标头代码注入中：

jQuery(document).ready(function($) {

  if (sessionStorage.getItem('advertOnce') !== 'true') {

    //sessionStorage.setItem('advertOnce','true');

    $('.box').show();

  } else {

    $('.box').hide();

  };

  $('#btn-alpha').click(function() {

    sessionStorage.setItem('advertOnce', 'true');

    $('.box').hide();

  });

  $('#btn-beta').click(function() {

    window.location.href = 'http://google.com/';

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<main>

  <article class="box">

    <div class="box-left">

    </div>

    <div class="box-right">

      <h3>Age Verification</h3>

      <p>This site requires you to be 21 years or older to enter. </p>

      <p>By clicking 'YES', I certify that I am 21 years or older.</p>

      <a href="#" class="btn btn-alpha" id="refresh-page">YES</a>

      <a href="#" class="btn btn-beta" id="refresh-page">NO</a>

    </div>

  </article>

  <div class="overlay-verify"></div>

</main>

Answer 1

您将按钮类定位为 JavaScript 中的 id。将这两行中的#a替换为：.$('#btn-alpha').click(function() {&nbsp; &nbsp; // $('.btn-alpha')和$('#btn-beta').click(function() {&nbsp; &nbsp; &nbsp;// $('.btn-beta')它现在应该可以工作了，尽管这两个按钮也具有id与评论中提到的相同的功能。Id 必须是唯一的，因此页面上最多有一个元素具有特定的 id。这是更正后的代码（我用 sessionStorage 注释掉了部分）：jQuery(document).ready(function($) {&nbsp; /*&nbsp; &nbsp; if (sessionStorage.getItem('advertOnce') !== 'true') {&nbsp; &nbsp; &nbsp; //sessionStorage.setItem('advertOnce','true');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $('.box').hide();&nbsp; &nbsp; };&nbsp; */&nbsp;&nbsp;&nbsp; $('.box').show();&nbsp;&nbsp;&nbsp; $('.btn-alpha').click(function() {&nbsp; &nbsp; //sessionStorage.setItem('advertOnce', 'true');&nbsp; &nbsp; $('.box').hide();&nbsp; });&nbsp; $('.btn-beta').click(function() {&nbsp; &nbsp; window.location.href = 'http://google.com/';&nbsp; });});/*----------------------------------------------&nbsp; &nbsp;-Defualt to border-box-----------------------------------------------&nbsp; */*,*:before,*:after {&nbsp; -webkit-box-sizing: border-box;&nbsp; -moz-box-sizing: border-box;&nbsp; box-sizing: border-box;}html,body {&nbsp; font-family: helvetica;&nbsp; font-size: 100%;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; font-weight: 400;&nbsp; font-family: Raleway;&nbsp; line-height: 1.4;}/*----------------------------------------------&nbsp; &nbsp;--Fluid body sizing-----------------------------------------------&nbsp; */body {&nbsp; font-size: 100%;}@media (min-width: 32em) {&nbsp; body {&nbsp; &nbsp; font-size: 110%;&nbsp; }}@media (min-width: 54em) {&nbsp; body {&nbsp; &nbsp; font-size: 111%;&nbsp; }}@media (min-width: 74em) {&nbsp; body {&nbsp; &nbsp; font-size: 115%;&nbsp; }}@media (min-width: 96em) {&nbsp; body {&nbsp; &nbsp; font-size: 135%;&nbsp; }}a.btn {&nbsp; background-color: #e3c827;&nbsp; color: #000;&nbsp; text-decoration: none;&nbsp; display: inline-block;&nbsp; letter-spacing: 0.1em;&nbsp; padding: 0.5em 0em;}a.btn.btn-beta {&nbsp; background-color: #800000;}.overlay-verify {&nbsp; background: #000;&nbsp; position: fixed;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; top: 0;&nbsp; left: 0;&nbsp; z-index: 1;}.box {&nbsp; background: #fff;&nbsp; position: relative;&nbsp; left: 0;&nbsp; right: 0;&nbsp; top: 20%;&nbsp; bottom: 0;&nbsp; margin: 0 auto;&nbsp; z-index: 9;&nbsp; width: 70%;&nbsp; height: 40%;&nbsp; display: table;}.box .box-left,.box .box-right {&nbsp; width: 100%;&nbsp; position: relative;&nbsp; text-align: center;&nbsp; padding: 5%;}@media (min-width: 54em) {&nbsp; .box .box-left,&nbsp; .box .box-right {&nbsp; &nbsp; display: table-cell;&nbsp; &nbsp; vertical-align: middle;&nbsp; &nbsp; width: 50%;&nbsp; }}.box .box-left p,.box .box-right p {&nbsp; position: relative;&nbsp; z-index: 3;}.box .box-left {&nbsp; background: url(https://www.distillery.news/wp-content/uploads/2018/03/84743_Hochatown-2.jpg) 50% 50%;&nbsp; background-size: cover;}.box .box-left img {&nbsp; position: relative;&nbsp; z-index: 1;&nbsp; width: 9em;}.box .box-left:after {&nbsp; content: '';&nbsp; position: relative;&nbsp; z-index: 0;&nbsp; top: 0;&nbsp; left: 0;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; background-color: rgba(0, 0, 0, 0);}.box .box-right {&nbsp; background-color: #000000;&nbsp; text-align: center;}.box .box-right h3 {&nbsp; color: #fff;&nbsp; text-transform: uppercase;&nbsp; letter-spacing: 0.07em;&nbsp; border-bottom: 1px solid #eee;&nbsp; padding-bottom: 1em;&nbsp; margin: 0 auto;}.box .box-right p {&nbsp; color: #fff;}.box .box-right small {&nbsp; color: #fff;}.box .box-right .btn {&nbsp; font-weight: 600;&nbsp; letter-spacing: 0.2em;&nbsp; padding: 0.9em 1em 0.7em;&nbsp; margin: 1em auto;&nbsp; display: block;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><main>&nbsp; <article class="box">&nbsp; &nbsp; <div class="box-left">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="box-right">&nbsp; &nbsp; &nbsp; <h3>Age Verification</h3>&nbsp; &nbsp; &nbsp; <p>This site requires you to be 21 years or older to enter. </p>&nbsp; &nbsp; &nbsp; <p>By clicking 'YES', I certify that I am 21 years or older.</p>&nbsp; &nbsp; &nbsp; <a href="#" class="btn btn-alpha" id="refresh-page-yes">YES</a>&nbsp; &nbsp; &nbsp; <a href="#" class="btn btn-beta" id="refresh-page-no">NO</a>&nbsp; &nbsp; </div>&nbsp; </article>&nbsp; <div class="overlay-verify"></div></main>

Answer 2

这是一个工作示例（堆栈片段可能不会保存 sessionStorage，因此请在此处查看：https:&nbsp;//jsfiddle.net/v358z1yt/jQuery(document).ready(function($) {&nbsp; if (sessionStorage.getItem('advertOnce') !== 'true') {&nbsp; &nbsp; $('.box').show();&nbsp; } else {&nbsp; &nbsp; $('.box').hide();&nbsp; };&nbsp; $('.btn-alpha').click(function() {&nbsp; &nbsp; sessionStorage.setItem('advertOnce', 'true');&nbsp; &nbsp; $('.box').hide();&nbsp; });&nbsp; $('.btn-beta').click(function() {&nbsp; &nbsp; window.location.href = 'http://google.com/';&nbsp; });});/*----------------------------------------------&nbsp; &nbsp;-Defualt to border-box-----------------------------------------------&nbsp; */*,*:before,*:after {&nbsp; -webkit-box-sizing: border-box;&nbsp; -moz-box-sizing: border-box;&nbsp; box-sizing: border-box;}html,body {&nbsp; font-family: helvetica;&nbsp; font-size: 100%;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; font-weight: 400;&nbsp; font-family: Raleway;&nbsp; line-height: 1.4;}/*----------------------------------------------&nbsp; &nbsp;--Fluid body sizing-----------------------------------------------&nbsp; */body {&nbsp; font-size: 100%;}@media (min-width: 32em) {&nbsp; body {&nbsp; &nbsp; font-size: 110%;&nbsp; }}@media (min-width: 54em) {&nbsp; body {&nbsp; &nbsp; font-size: 111%;&nbsp; }}@media (min-width: 74em) {&nbsp; body {&nbsp; &nbsp; font-size: 115%;&nbsp; }}@media (min-width: 96em) {&nbsp; body {&nbsp; &nbsp; font-size: 135%;&nbsp; }}a.btn {&nbsp; background-color: #e3c827;&nbsp; color: #000;&nbsp; text-decoration: none;&nbsp; display: inline-block;&nbsp; letter-spacing: 0.1em;&nbsp; padding: 0.5em 0em;}a.btn.btn-beta {&nbsp; background-color: #800000;}.overlay-verify {&nbsp; background: #000;&nbsp; position: fixed;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; top: 0;&nbsp; left: 0;&nbsp; z-index: 1;}.box {&nbsp; background: #fff;&nbsp; position: relative;&nbsp; left: 0;&nbsp; right: 0;&nbsp; top: 20%;&nbsp; bottom: 0;&nbsp; margin: 0 auto;&nbsp; z-index: 9;&nbsp; width: 70%;&nbsp; height: 40%;&nbsp; display: table;}.box .box-left,.box .box-right {&nbsp; width: 100%;&nbsp; position: relative;&nbsp; text-align: center;&nbsp; padding: 5%;}@media (min-width: 54em) {&nbsp; .box .box-left,&nbsp; .box .box-right {&nbsp; &nbsp; display: table-cell;&nbsp; &nbsp; vertical-align: middle;&nbsp; &nbsp; width: 50%;&nbsp; }}.box .box-left p,.box .box-right p {&nbsp; position: relative;&nbsp; z-index: 3;}.box .box-left {&nbsp; background: url(https://www.distillery.news/wp-content/uploads/2018/03/84743_Hochatown-2.jpg) 50% 50%;&nbsp; background-size: cover;}.box .box-left img {&nbsp; position: relative;&nbsp; z-index: 1;&nbsp; width: 9em;}.box .box-left:after {&nbsp; content: '';&nbsp; position: relative;&nbsp; z-index: 0;&nbsp; top: 0;&nbsp; left: 0;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; background-color: rgba(0, 0, 0, 0);}.box .box-right {&nbsp; background-color: #000000;&nbsp; text-align: center;}.box .box-right h3 {&nbsp; color: #fff;&nbsp; text-transform: uppercase;&nbsp; letter-spacing: 0.07em;&nbsp; border-bottom: 1px solid #eee;&nbsp; padding-bottom: 1em;&nbsp; margin: 0 auto;}.box .box-right p {&nbsp; color: #fff;}.box .box-right small {&nbsp; color: #fff;}.box .box-right .btn {&nbsp; font-weight: 600;&nbsp; letter-spacing: 0.2em;&nbsp; padding: 0.9em 1em 0.7em;&nbsp; margin: 1em auto;&nbsp; display: block;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><main>&nbsp; <article class="box">&nbsp; &nbsp; <div class="box-left">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="box-right">&nbsp; &nbsp; &nbsp; <h3>Age Verification</h3>&nbsp; &nbsp; &nbsp; <p>This site requires you to be 21 years or older to enter. </p>&nbsp; &nbsp; &nbsp; <p>By clicking 'YES', I certify that I am 21 years or older.</p>&nbsp; &nbsp; &nbsp; <a href="#" class="btn btn-alpha">YES</a>&nbsp; &nbsp; &nbsp; <a href="#" class="btn btn-beta">NO</a>&nbsp; &nbsp; </div>&nbsp; </article>&nbsp; <div class="overlay-verify"></div></main>问题是您使用#btn-alphaand#btn-beta作为选择器，但您需要使用类名。另外，我从你的按钮中删除了重复的 ID。那是不行的。

Answer 3

将它们视为带有“.”的类 而不是“#”似乎修复了“是”按钮，但是，第二个按钮不起作用。另一个问题的进一步研究（window.location.href 不起作用）让我添加return false;在 window.location.href 之后，但这仍然不起作用。想法？jQuery(document).ready(function($) {  if (sessionStorage.getItem('advertOnce') !== 'true') {    $('.box').show();  } else {    $('.box').hide();  };  $('.btn-alpha').click(function() {    sessionStorage.setItem('advertOnce', 'true');    $('.box').hide();  });  $('.btn-beta').click(function() {    window.location.href = "https://www.google.com/";return false;  });});