javascript - jQuery save clicked state after refresh -
this question has answer here:
- jquery $.cookie not function 5 answers
i created function change view. add new classes if option clicked. want save state of clicked option , after refresh of page should display option clicked before refresh. implemented jquery option $.cookie
looks doesn't work. have error "$.cookie not function"
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(); }
create localstorage as
localstorage.setitem('key',value);
and result from
localstorage.getitem('key');
Comments
Post a Comment