jquery - 如何在 cookie 中保存 jQuery CSS 操作？

Question

我在我的 Wordpress 网站上获得了这段代码，它允许用户在单击通过 HTML 生成的 3 个按钮之一时更改 body {} 的字体大小:

<button class='body_standard_font_size'>Standard</button>
<button class='body_medium_font_size'>medium</button>
<button class='body_big_font_size'>big</button>


jQuery(document).ready(function(){
  jQuery('.body_standard_font_size').on('click', function() {
    jQuery('body').css('font-size','100%');
});
});
jQuery(document).ready(function(){
  jQuery('.body_medium_font_size').on('click', function() {
    jQuery('body').css('font-size','150%');
});
});
jQuery(document).ready(function(){
  jQuery('.body_big_font_size').on('click', function() {
    jQuery('body').css('font-size','200%');
});
});

我以前从未使用过 cookie。如何将更改保存在 cookie 中，以便永久保留或至少在 session 期间保留字体大小更改？

@Sleek Geek(抱歉，之前把你的名字拼错了；)

我正在尝试从 Github 安装 jQuery Cookie。 它说我应该在我的 jQuery 库之后包含脚本。 这就是我将现有的 jQuery 脚本放入 functions.php 中的方式

add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script(
    'custom',
    get_stylesheet_directory_uri() . '/js/custom.js',
    array( 'jquery' )
);
        }

现在我尝试在同一个钩子(Hook)中添加下面的 jQuery cookie，所以它看起来像这样:

add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script(
    'custom',
    get_stylesheet_directory_uri() . '/js/custom.js',
    array( 'jquery' )
);
        }

function menu_scripts() {
wp_enqueue_script(
    'jquery.cookie',
    get_stylesheet_directory_uri() . '/js/jquery.cookie.js',
    array( 'jquery' )
);
        }

但是页面不再加载了。我什至不知道我是否正确调整了代码...

Answer 1

研究下面的方法并根据需要进行调整。

function fontExpand(){        
        var fontExpand = $('body').css('font-size','100%');
        $.cookie('font-grew', true, {path: '/'});

    }
     console.log('my font grew.');
    // - checks the font size above
    if($.cookie('font-grew')){
        console.log('font grows automatically...');
        fontExpand();

    }

        // Increase the font size on click
    $('.body_standard_font_size').click(function () {

           fontExpand();

    });