刷新后jQuery保存点击状态

我创建了改变视图的函数。如果选项被点击，添加一些新的类。但是我想保存点击选项的状态和刷新页面之后刷新前应该显示点击选项。我实现了jQuery选项$.cookie，但它看起来不起作用。我只有一个错误“$ .cookie不是一个函数”刷新后jQuery保存点击状态

var gridOfThree = $('.mh-1on3--grid').on('click', function() { 

    $('.mh-1on3--grid').addClass('mh-filters__right__button--active'); 
    $('.mh-1on2--grid').removeClass('mh-filters__right__button--active'); 
    $('.mh-1on1--grid').removeClass('mh-filters__right__button--active'); 
    $('.mh-margin-bottom-small').removeClass('mh-grid__1of2'); 
    $('.mh-margin-bottom-small').removeClass('mh-grid__1of1'); 
    $('.mh-margin-bottom-small').addClass('mh-grid__1of3'); 
    if (!$('#post-113').hasClass('mh-estate-vertical')) { 
     $('#post-113').addClass('mh-estate-vertical'); 
    } 
    $('#post-113').removeClass('mh-estate-horizontal'); 
    $('.wrap-div-to-change-look').removeClass('mh-estate-horizontal__inner'); 
    $('.vertical-to-horizontal-dynamic').removeClass('mh-estate-horizontal__right'); 
    $('.vertical-to-horizontal-dynamic').addClass('mh-estate-vertical__content'); 
    $('.vertical-to-horizontal-dynamic').css('height','275px'); 
    $('.mh-estate-vertical__date').css('left', ''); 
    if ($('div.mh-estate-horizontal__left').hasClass('mh-estate-horizontal__left')) { 
     $('.mh-thumbnail').unwrap('<div class="mh-estate-horizontal__left"></div>'); 
    } 
    $.cookie('gridOfThree', true); 
    $.cookie('gridOfTwo', false); 
    $.cookie('gridOfOne', false); 

}); 

var gridOfTwo = $('.mh-1on2--grid').on('click', function() { 

    $('.mh-1on2--grid').addClass('mh-filters__right__button--active'); 
    $('.mh-1on3--grid').removeClass('mh-filters__right__button--active'); 
    $('.mh-1on1--grid').removeClass('mh-filters__right__button--active'); 
    $('.mh-margin-bottom-small').removeClass('mh-grid__1of1'); 
    $('.mh-margin-bottom-small').removeClass('mh-grid__1of3'); 
    $('.mh-margin-bottom-small').addClass('mh-grid__1of2'); 
    if (!$('#post-113').hasClass('mh-estate-vertical')) { 
     $('#post-113').addClass('mh-estate-vertical'); 
    } 
    $('#post-113').removeClass('mh-estate-horizontal'); 
    $('.wrap-div-to-change-look').removeClass('mh-estate-horizontal__inner'); 
    $('.vertical-to-horizontal-dynamic').removeClass('mh-estate-horizontal__right'); 
    $('.vertical-to-horizontal-dynamic').addClass('mh-estate-vertical__content'); 
    $('.vertical-to-horizontal-dynamic').css('height','146px'); 
    $('.mh-estate-vertical__date').css('left', ''); 
    if ($('div.mh-estate-horizontal__left').hasClass('mh-estate-horizontal__left')) { 
     $('.mh-thumbnail').unwrap('<div class="mh-estate-horizontal__left"></div>'); 
    } 
    $.cookie('gridOfTwo', true); 
    $.cookie('gridOfThree', false); 
    $.cookie('gridOfOne', false); 
}); 

var gridOfOne = $('.mh-1on1--grid').on('click', function() { 
    $('.mh-1on1--grid').addClass('mh-filters__right__button--active'); 
    $('.mh-1on3--grid').removeClass('mh-filters__right__button--active'); 
    $('.mh-1on2--grid').removeClass('mh-filters__right__button--active'); 
    $('.mh-margin-bottom-small').removeClass('mh-grid__1of2'); 
    $('.mh-margin-bottom-small').removeClass('mh-grid__1of3'); 
    $('.mh-margin-bottom-small').addClass('mh-grid__1of1'); 
    $('#post-113').removeClass('mh-estate-vertical'); 
    $('#post-113').addClass('mh-estate-horizontal'); 
    $('.wrap-div-to-change-look').addClass('mh-estate-horizontal__inner'); 
    $('.vertical-to-horizontal-dynamic').addClass('mh-estate-horizontal__right'); 
    $('.vertical-to-horizontal-dynamic').removeClass('mh-estate-vertical__content'); 
    $('.vertical-to-horizontal-dynamic').css('height','146px'); 
    $('.mh-estate-vertical__date').css('left', '475px'); 
    if (!$('div.mh-estate-horizontal__left').hasClass('mh-estate-horizontal__left')) { 
     $('.mh-thumbnail').wrap('<div class="mh-estate-horizontal__left"></div>'); 
    } 
    $.cookie('gridOfOne', true); 
    $.cookie('gridOfTwo', false); 
    $.cookie('gridOfThree', false); 
}); 
if ($.cookie('gridOfOne') == 'true') { 
    $('.mh-1on1--grid').click(); 
} else if ($.cookie('gridOfTwo') == 'true') { 
    $('.mh-1on2--grid').click(); 
} else if ($.cookie('gridOfThree') == 'true') { 
    $('.mh-1on3--grid').click(); 
}

来源

2017-08-18 Konrad Uciechowski

得到的结果可能这可以帮助您的https： //stackoverflow.com/questions/18024539/jquery-cookie-is-not-a-function –

创建的localStorage作为

localStorage.setItem('key',value);

而且从

localStorage.getItem('key');

来源

2017-08-18 08:07:02

刷新后jQuery保存点击状态

回答

相关问题