jquery - 降临日历 - 使用 cookies 阻止用户两次打开 "calendar door"

Question

这个问题可能需要一些解释，所以将解释我的项目:

我正在制作一个圣诞降临日历，用户可以从中打开隐藏在一扇门后面的链接，该链接在悬停时使用 CSS 动画打开。

仅当元素具有 .activeAdv 类时才会启动动画，而 .activeAdv 类仅在元素包含内容时才会添加。此功能使用 WordPress 计划帖子(12 月的每一天一个)来控制

我的问题是如何使用 cookie 来阻止回访用户打开同一扇门两次。

一旦他们点击了框中的链接，就应该设置一个 cookie，以便在加载时门会自动打开，并删除其中的任何内容。

到目前为止，我有一个功能的 codepen 演示，并且还包含了我有一些经验的 cookie.js。

http://codepen.io/Jambob/pen/wKyoRr

下面是一个盒子的代码片段:

<article>
  <div id="on-1" class="box">
    <h2>1 dec</h2>
  </div>
  <div class="present">
    sample content
    <a href=" www.google.com"> www.google.com</a>
  </div>
</article>

<script>
$(document).ready(function(){

   $(".present").filter(function(){
    return $(this).html().trim().length > 0;
    }).parent().addClass('activeAdv');

});
</script>

我确实希望这个问题在提问中很清楚，我知道如何设置cookie以及如何检测它们，我的问题实际上是关于解决这个问题的逻辑。任何帮助将不胜感激，我相信圣诞老人会感到自豪......

Answer 1

基本上，如果您有链接并且没有设置 cookie，您希望显示该链接。每次用户看到链接时都应该设置 cookie。用户可以看到 cookie，直到页面被导航离开。

$(".present").filter(function(){
    var $present = $(this);
    var $link = $present.find('a');
    var haveLink = $link.length > 0;
    // no link means no op
    if (!haveLink) {
        return false;
    }
    // create a unique name per link
    var cookieName = "link-" + $link.attr('href').trim();
    // see if we have a cookie by that name
    var haveCookie = $.cookie(cookieName);
    // set the cookie because this page load is the last time they can see it
    // if we don't have a cookie we can show the link
    var showLink = !haveCookie;
    // alway set the cookie so we don't show
    $.cookie(cookieName, true);
    return showLink;
 }).parent().addClass('activeAdv');

here is the fiddle