Question

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

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

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

我的问题是关于如何使用Cookie来阻止返回的用户能够两次打开同一个门。

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

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

以下是一个框的代码片段：

<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

出现日历 - 使用cookie来阻止用户打开＆＃34;日历门＆＃34;两次

1 个答案: