Question

我正在使用这个javascript，我可以更改类onClick（其他类）。

$(window).load(function(){
$(".changefontA").click(function () {
    $("body").removeClass("a").addClass("b");
    $(this).hide();
    $(".changefontB").fadeIn();
});
$(".changefontB").click(function () {
    $("body").removeClass("b").addClass("a");
    $(this).hide();
    $(".changefontA").fadeIn();
});
});

因为字体的巨大变化我想将其存储在cookie中，所以当访问者访问另一个页面时，网站会记住更改并且不会切换回原始字体。我是饼干的新手，所以我希望有人可以帮助我，或者让我先行一步。

Answer 1

如果您打算使用jQuery cookie插件，可以执行类似

的操作

$(window).load(function () {
    $(".changefontA").on('click.myfont', function () {
        $("body").removeClass("a").addClass("b");
        $(this).hide();
        $(".changefontB").fadeIn();
        $.cookie('my-font', 'changefontA', {
            path: '/'
        });
    });
    $(".changefontB").on('click.myfont', function () {
        $("body").removeClass("b").addClass("a");
        $(this).hide();
        $(".changefontA").fadeIn();
        $.cookie('my-font', 'changefontB', {
            path: '/'
        });
    });

    //set the class based on the already set cookie
    var font = $.cookie('my-font');
    if (font) {
        $('.' + font).trigger('click.myfont');
    }
});

演示：Fiddle

Answer 2

根据您的目标环境等，我会考虑使用HTML5网络存储 - sessionStorage（仅适用于现有会话）或localStorage（永久存储或直到存储被清除）。

$(window).load(function(){
$(".changefontA").click(function () {
    $("body").removeClass("a").addClass("b");
    $(this).hide();
    $(".changefontB").fadeIn();
    sessionStorage['fontClass'] = "b";
});
$(".changefontB").click(function () {
    $("body").removeClass("b").addClass("a");
    $(this).hide();
    $(".changefontA").fadeIn();
    sessionStorage['fontClass'] = "a";
});
});

在每个页面上，您可以检查是否存储了先前的设置并相应地设置了班级

 if ('fontClass' in sessionStorage) {
   // remove any default class setting here first
   $("body").addClass(sessionStorage['fontClass']);
 }

使用javascript更改类并使用cookie存储

2 个答案: