javascript - 如果有 cookie，则隐藏代码

Question

我已经尝试了各种不同的代码，php、javascript，但我无法让它按照我想要的方式工作。让我解释一下:

首先，我的代码应该检查 cookie。如果有 cookie，则不应显示此代码:

<ul>
  <li><a id="demo03" href="#modal-03">DEMO03 7</a>
  </li>
</ul>




<!--DEMO03-->
<div id="modal-03" style="background-image:url(images/access.jpg); background-size:cover;">
  <!--"THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID-->
  <div id="btn-close-modal" class="close-modal-03">
    <!--CLOSE MODAL-->
  </div>

  <div class="modal-content">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <img src="images/logo.png" />
    <br />
    <br />
    <font color="#bfbaa8">Man skal være over 18 år, for at få adgang til denne side.<br />
                <font size="+4">Indtast dit fødselsår</font>
    <br />
    <input maxlength="4" id="age_validation_input" size="33" align="middle" style="background-color: rgba(191, 186, 168, 0.8); border:none; height:90px; width:380px; color:#3d3b33; padding:15px; font-size:70px; font-weight:bold;" value="F.eks. 1963" onblur="if (this.value == '') {this.value = 'F.eks. 1963';}"
    onfocus="if (this.value == 'F.eks. 1963') {this.value = '';}">
    </font>
    <br />
    <input type="button" id="age_validation_btn" align="middle" style="background-color: rgba(99, 95, 82, 0.8); border:none; height:65px; width:410px; color:#c4bda4; font-size:40px; font-weight:bold;" value="OK" />
    <br />
    <br />
    <font size="-1" color="#69665b">Ved at klikke "OK" giver du tilladelse til, at webstedet benytter cookies.</font>
  </div>
</div>

然后我有一个 javascript 片段。也就是说，如果一切正常，应该设置一个 cookie(进入站点时将搜索的 cookie，如上所述)。这是代码，////////////是应该创建 cookie 的地方。

$('#age_validation_btn').on('click', function() {

  var age = parseInt($('#age_validation_input').val(), 10);
  var currentYear = (new Date).getFullYear();
  var calculatedYear = currentYear - 123;
  var oldage = age - calculatedYear;

  if (age > currentYear) {
    swal("Hov!", "Vi er ikke nået til det år endnu.", "error");
    return false;
  }

  if (oldage < 5) {
    swal("Hov!", "Du skal indtaste et gyldigt fødselsår.", "error");
    return false;
  }

  if (isNaN(age) || age == 'F.eks. 1963') {
    swal("Hov!", "Du skal indtaste dit fødselsår, for at få adgang til denne side.", "error");
    return false; //stop the validation here
  }

  if (new Date().getFullYear() - age >= 18) {
    //////////////////////////////
    //////////////////////////////
    //////////////////////////////
    $('#btn-close-modal').trigger('click');
  } else {
    location.href = 'noaccess.html';
  }
});

谁能帮帮我？我已经尝试了很长一段时间，但运气不好:-(

举个例子，我试过这个...这段代码是应该隐藏代码的代码:

<?php
if(!isset($_COOKIE[$cookie_name])) {
    // nothing should happen, pass user
} else {
    echo '
  <ul>
    <li><a id="demo03" href="#modal-03">DEMO03 7</a>
    </li>
  </ul>




  <!--DEMO03-->
  <div id="modal-03" style="background-image:url(images/access.jpg); background-size:cover;">
    <!--"THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID-->
    <div id="btn-close-modal" class="close-modal-03">
      <!--CLOSE MODAL-->
    </div>

    <div class="modal-content">
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <img src="images/logo.png" />
      <br />
      <br />
      <font color="#bfbaa8">Man skal være over 18 år, for at få adgang til denne side.<br />
                <font size="+4">Indtast dit fødselsår</font>
      <br />
      <input maxlength="4" id="age_validation_input" size="33" align="middle" style="background-color: rgba(191, 186, 168, 0.8); border:none; height:90px; width:380px; color:#3d3b33; padding:15px; font-size:70px; font-weight:bold;" value="F.eks. 1963">
      </font>
      <br />
      <input type="button" id="age_validation_btn" align="middle" style="background-color: rgba(99, 95, 82, 0.8); border:none; height:65px; width:410px; color:#c4bda4; font-size:40px; font-weight:bold;" value="OK" />
      <br />
      <br />
      <font size="-1" color="#69665b">Ved at klikke "OK" giver du tilladelse til, at webstedet benytter cookies.</font>
    </div>
  </div>
    ';
}
?>

这是应该创建 cookie 的部分:

$('#age_validation_btn').on('click', function() {

    var age = parseInt($('#age_validation_input').val(), 10);
    var currentYear = (new Date).getFullYear();
    var calculatedYear = currentYear - 123;
    var oldage = age - calculatedYear;

    if(age > currentYear) {
        swal("Hov!", "Vi er ikke nået til det år endnu.", "error");
        return false;
    }

    if(oldage < 5) {
        swal("Hov!", "Du skal indtaste et gyldigt fødselsår.", "error");
        return false;
    }

    if(isNaN(age) || age == 'F.eks. 1963') {
        swal("Hov!", "Du skal indtaste dit fødselsår, for at få adgang til denne side.", "error");
        return false;//stop the validation here
    }

    if(new Date().getFullYear() - age >= 18) {  
        <? $cookie_name = "user"; ?>
        $('#btn-close-modal').trigger('click'); 
    } else {
        location.href = 'noaccess.html';
    }
});

Answer 1

1. PHP - 如果未设置 cookie，则显示代码，而不是在已设置时隐藏代码:

<?php
if(!isset($_COOKIE["user"])) { ?>
  <ul>
    <li><a id="demo03" href="#modal-03">DEMO03 7</a>
    </li>
  </ul>
<?php } ?>

1. JS - 使用 https://github.com/js-cookie/js-cookie :

if (new Date().getFullYear() - age >= 18) { 
     Cookies.set("user","ok");
     $('#btn-close-modal').trigger('click');
 } else {
     Cookies.remove("user");
    location.href = 'noaccess.html';
 }

这假设您希望在他们下次访问时隐藏 UL