Question

我正在创建一个演示面板，供用户在到达我的演示网站时更改Wordpress主题的布局。用户通过选择下拉框更改值，并在此时设置cookie。

在刷新页面后，我无法显示我想要实现的操作。因此cookie保存了它的价值，但是在页面刷新之后我的CSS动作将不会保留。我对jQuery不是很了解所以任何帮助都会受到赞赏。这是代码：

$('#montage-demo-panel select.body-style-layout').change(function () {

        // Apply cookie
        $.cookie('body-style-layout', $(this).val(), { path: '/' });

                    var value = $(this).val();
                    if (value == 'fixed') {
                    var wrapper = $('#wrapper');
                    var header = $('#header');
                    var masthead = $('#masthead');
                    var branding = $('#branding');

                    wrapper.removeAttr('style');
                    header.removeAttr('style');
                    masthead.removeAttr('style');
                    branding.removeAttr('style');

                    wrapper.removeClass('wrapper-full purple-header-full');
                    header.removeClass('header-full');
                    masthead.removeClass('masthead-full');
                    branding.removeClass('branding-full');
                    location.reload();

                   } else {

                    var wrapper = $('#wrapper');
                    var header = $('#header');
                    var masthead = $('#masthead');
                    var branding = $('#branding');
                    var mainbg = $('#main-bg');
                    var access = $('#access');

                    wrapper.removeClass('purple-header');

                    wrapper.addClass('wrapper-full purple-header-full');
                    header.addClass('header-full');
                    masthead.addClass('masthead-full');
                    branding.addClass('branding-full');
                    mainbg.addClass('main-bg-full');
                    access.addClass('access-full');

        // Re-fresh page
        location.reload();
                }
    });

Answer 1

...如果您只是在change();事件上应用该样式，它肯定不会影响页面刷新。我建议每次刷新页面时检查cookie值，例如：

$(function(){
   var cookieval = $.cookie('cookie-key');
   if (cookieval === 'something'){
      //here implement style according to 'something'
   } else {
      //here implement another style
   }
});

祝你好运!!

更新：

将代码放在页面的任何位置;

只需设置cookie并重新加载选择更改;像：

 $('#montage-demo-panel select.body-style-layout').change(function () {
    $.cookie('body-style-layout', $(this).val(), { path: '/' });
    location.reload();
 }

进行。

如何在页面刷新后保持Cookie值

1 个答案: