Jquery cookie 仅显示在特定页面上

Question

我正在使用 jQuery Cookie 和 Fancybox 来显示一些预告视频。

我在页面底部设置了一个自定义链接，它看起来像这样：

<a class="fancybox-cookie" href="http://www.youtube.com/embed/the_video_link?autoplay=1&rel=0"></a>  

在我的 jQuery 中，我正在显示这样的视频：

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

        //Cookie
                $.cookie('video', 'some_value', { path: '/events' });

                $('.fancybox-cookie').fancybox({
                openEffect      : 'elastic',
                closeEffect     : 'elastic',
                padding         : 20,
                maxWidth        : 800,
                maxHeight       : 600,
                fitToView       : false,
                width           : '70%',
                height          : '70%',
                autoSize        : false,
                type            : 'iframe',         
                }).trigger('click');
        //$.removeCookie('video');   
    });
})(jQuery);

从代码中可以看出，我正在尝试使用 cookie 调用视频，但仅在特定页面上调用，在本例中为 /events 页面。 即使我这样做，视频也会显示在每一页上。

我的整个想法是每次用户进入网站并访问“事件”页面时，Fancybox 都会显示视频，但如果访问者查看其他页面，则不应该显示视频。

我在哪里错了？

这是我尝试过的另一种方法，它只显示一次，我设置了 2400 分钟过期，在此之前我设置了一分钟，没关系，但它仍然显示在每个页面上。

(function($){
$(document).ready(function() {
    if ($(window).width() > 768) {

    //Cookie
    var check_cookie = $.cookie('video');
    var date = new Date();
    var minutes = 2400;
    date.setTime(date.getTime() + (minutes * 60 * 1000));
    if(check_cookie == null) {
        $.cookie('video', 'some_value', { expires: date, path: '/events' });

        $('.fancybox-cookie').fancybox({
        'openEffect':    'elastic',
        'closeEffect':   'elastic',
        'padding'           : 20,
        'autoScale'         : false,
        'width'             : 800,
        'height'            : 705,
        'type'              : 'iframe', 
        'scrolling'         : 'no'      
        }).trigger('click');            
     }
     else {
        return false;   
    } 

    //$.removeCookie('video'); 
    }
});

})(jQuery);

编辑： 我后来意识到，在我的第一个示例中，我的错误是 .trigger() 我在每个页面上都调用了，所以它必须有一些逻辑，就像我的第二个示例中的 if statement ，但为什么视频会在每一页上触发？

Answer 1

根据 Rob M 在 thread 中的回答，以及我之前使用 jQuery Cookie 插件的回忆，path 参数定义了 cookie 可用和可访问的 URL。

另外，根据 gitHub 上的 jQuery Cookie documentation：

1. 当您删除 cookie 时，您需要使用以下设置进行操作 您一开始就通过了创建它；
2. 当你测试一个cookie是否被设置时，你需要检查它是undefined，而不是null，像这样：

var isCookieSet = typeof $.cookie('video') === 'undefined';

话虽如此，我不明白您为什么需要使用 jQuery Cookie，因为您只能在事件页面中显示链接（并触发它），如下所示：

jQuery(function($) {
    $(document).ready(function() {
        if( window.location.href.search(/\/events/) > -1 ) $(".fancybox-cookie").trigger("click");
    });
});

如果您使用 jQuery Cookie 的原因是因为您只想触发一次视频并能够检测它是否已经触发，那么在这种情况下它是有意义的，您可以这样做：

jQuery(function($) {
    $(document).ready(function() {
        if( window.location.href.search(/\/events/) > -1 ) {
            if( typeof $.cookie('video') === 'undefined' ) {
                var date = new Date();
                var minutes = 2400;
                date.setTime(date.getTime() + (minutes * 60 * 1000));
                $.cookie('video', 'some_value', { expires: date });
                $(".fancybox-cookie").trigger("click");
            }
        }
    });
});

不需要设置路径变量，因为再次根据文档，默认路径值是创建 cookie 的 url。