Jquery Cookie 记住类答案

【问题标题】：Jquery Cookie remember classJquery Cookie 记住类
【发布时间】：2019-09-27 16:18:52
【问题描述】：

我有以下代码，并想调整它以记住添加的类，以便它在整个站点中应用。我遇到了 Jquery Cookie:https://github.com/carhartl/jquery-cookie 并希望用它来记住应用的类。如何保存当前状态？

    $.cookie('elemshow.on');    
var elemhide = $('.hide-menu'),
    elemshow = $('.show-menu, .show-menu2');

    elemhide.on('click', function(e){
        e.preventDefault();

        $('header').addClass('out-active');
        $('.header-foot').addClass('out-active');
        $('#content').addClass('full-width-added');
        setTimeout(function() {
            try {
                reconstructRn();
            } catch(err) {
            }
            window.dispatchEvent(new Event('resize'));
            elemshow.addClass('active');
        }, 300);

    });

    elemshow.on('click', function(e){
        e.preventDefault();

        $('header').removeClass('out-active');
        $('.header-foot').removeClass('out-active');
        $('#content').removeClass('full-width-added');
        elemshow.removeClass('active');
        setTimeout(function() {
            try {
                reconstructRevolution();
            } catch(err) {

            }
        }, 10);

    });

【问题讨论】：

你的代码有 HTML 吗？您在哪些元素上更改课程以及您如何从一个课程更改为另一个课程？一些背景信息有很长的路要走。

标签： javascript jquery html cookies

【解决方案1】：

我会像这样调整你的代码：

/* define elemhide and elemshow */
var elemhide = $('.hide-menu'),
    elemshow = $('.show-menu, .show-menu2');

/* click functions */
elemhide.on('click', function(e){

    e.preventDefault();

    /* cookie = 1 week */
    var date = new Date();
    date.setTime(date.getTime() + (1000 * 60 * 60 * 24 * 7));
    $.cookie('menu_cookie', '0', { expires: date, path: '/' });

    /* set classes */
    $('header').addClass('out-active');
    $('.header-foot').addClass('out-active');
    $('#content').addClass('full-width-added');
    setTimeout(function() {
        try {
            reconstructRn();
        } catch(err) {
            // do something
        }
        window.dispatchEvent(new Event('resize'));
        elemshow.addClass('active');
    }, 300);

});

elemshow.on('click', function(e){

    e.preventDefault();

    /* cookie = 1 week */
    var date = new Date();
    date.setTime(date.getTime() + (1000 * 60 * 60 * 24 * 7));
    $.cookie('menu_cookie', '1', { expires: date, path: '/' });

    /* set classes */
    $('header').removeClass('out-active');
    $('.header-foot').removeClass('out-active');
    $('#content').removeClass('full-width-added');
    elemshow.removeClass('active');
    setTimeout(function() {
        try {
            reconstructRevolution();
        } catch(err) {
            // do something
        }
    }, 10);

});

/* check for existing cookie */
if (!$.cookie('menu_cookie') || $.cookie('menu_cookie') == 0) {
    $('.hide-menu').trigger('click');
} else if ($.cookie('menu_cookie') == 1) {
    $('.show-menu').trigger('click');
}

这是一个小提琴：http://jsfiddle.net/Niffler/B8XBg/我不知道你的 HTML，所以我只使用颜色...

【讨论】：