Question

我无法理解jquery。希望有人可以帮助我设置切换曲奇。

我的脚本以下列方式运行，即用户toggle();，它会更改class，从而将Bootsrap网格布局从4列（3）更改为6列（2），此部分工作正常，但我想添加一个cookie，以便根据所选列的用户偏好设置。下面是js代码：

// 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');
}

DEMO

修改

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

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'); }

切换＆amp;设置Cookie

1 个答案: