切换并设置Cookie

Question

我无法理解jquery。 希望有人可以帮助我设置触发器的Cookie。

我的脚本按以下方式工作，用户toggle(); 并且它更改了class ，这又将Bootsrap网格布局从4列（3）更改为6列（2），这部分工作正常，但我想添加一个cookie，以便根据所选列的用户首选项进行设置。 以下是此代码：

// toggle click
//

$(".two, .three").click(function()
{                     
   $(".two, .three").toggle();
});

// Switch class and grid
//

$('.grid-toggle a').click(function(event) {
    $('.list-products li').removeClass('col-xs-3 col-sm-3 col-xs-2 col-sm-2 col-xs-3 col-sm-3 col-xs-4 col-sm-4 col-xs-6 col-sm-6');

    if ($(this).hasClass('three')) {
        $('.list-products li').addClass('col-xs-4 col-sm-4');
    }
    if ($(this).hasClass('two')) { //for less products
        $('.list-products li').addClass('col-xs-6 col-sm-6');
    }
    return false;
});

经过大量研究，我正在使用Jquery-Cookie工具，但在将其集成到当前代码中时遇到了麻烦。 我已经研究了Basic用法，但实际上无法将其整合到当前脚本中或在哪里？

以下是我的小提琴（包括所有依赖项）：

https://jsfiddle.net/panoplr/g68j6qfq/1/

Answer 1

您可以像这样使用jquery-cookie插件设置Cookie，

$.cookie("cookie_name", "value");

因此，您应该能够设置Cookie并最好在用户执行此类切换时更新它，

if ($(this).hasClass('three')) {
    $('.list-products li').addClass('col-xs-4 col-sm-4');
    $.cookie("pref", '4X4');
}
if ($(this).hasClass('two')) { //for less products
    $('.list-products li').addClass('col-xs-6 col-sm-6');
    $.cookie("pref", '6X6');
}

演示

编辑：

如果您想使用Cookie值显示正确的网格类型，则应在页面加载时（在$(document).ready(function(){}) ）读取cookie值，并相应地更改类，如下所示，

var pref = $.cookie("pref");

if (pref == "4X4") {
    $('.list-products li').removeClass('col-xs-6 col-sm-6');
    $('.list-products li').addClass('col-xs-4 col-sm-4');
} else if(pref == "6X6"){
    $('.list-products li').removeClass('col-xs-4 col-sm-4');
    $('.list-products li').addClass('col-xs-6 col-sm-6');
}