出现日历 - 使用 cookie 来阻止用户打开“日历门”两次

Question

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

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

只有当元素有一个 .activeAdv 类时，动画才会启动，而该类只有在元素包含内容时才会添加。此功能由 Wordpress 预定帖子控制（12 月的每一天）

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

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

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

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

下面是一个盒子的sn-p代码：

<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