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%');
});
});

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

@Sleek Geek（抱歉，之前拼错了你的名字;）

我正在尝试从Github安装jQuery Cookie。它说我应该在我的jQuery库之后包含脚本。这就是我在functions.php

中排队已经存在的jQuery脚本的方法

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

现在我尝试在同一个钩子中添加下面的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

您可以使用localStorage（不会过期）或sessionStorage（浏览器关闭时过期）;

所以你可以试试s.th：

$(document).ready(function(){
    $('.body_standard_font_size').on('click', function() {
        $('body').css('font-size','100%');
        localStorage.setItem('font-size', '100%');
    });

   ... //equivalent to the other click-functions

   //and on page load:
   var fontsize = localStorage.getItem('font-size');
   $('body').css('font-size', fontsize);
});

重构代码：无需在$(document).ready()中包含每个点击事件。您可以使用一个ready-handler

包装所有函数

我不知道你是否可以编辑你的html，但是你可以稍微收紧你的代码，这里是我的建议：

HTML

<button class='body_standard_font_size fontsize' data-size="100%">Standard</button>
<button class='body_medium_font_size fontsize' data-size="150%">medium</button>
<button class='body_big_font_size fontsize' data-size="200%">big</button>

的Javascript

$(document).ready(function(){
    var fontsize;
    $('.fontsize').on('click', function() {
        fontsize = $(this).data('size');
        $('body').css('font-size',fontsize);
        localStorage.setItem('font-size', fontsize);
    });

    fontsize = localStorage.getItem('font-size');
    $('body').css('font-size', fontsize);
});

Demo

如果您想使用cookies，可以使用以下命令设置cookie：

document.cookie = "font-size=100%";

并通过

获取

document.cookie;

但是你必须在其部分中分割cookie以获得实际的字体大小，所以我建议使用webStorage。

<强>参考

web storage

cookies

注意：这是所有主要浏览器和IE＆gt; = 8

的支持

Answer 2

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

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();

    });

Answer 3

<?php
	if (!isset($_POST['font'])) {
		echo "wrong post parameters - aborted";
	} else {
		setcookie("fontsize", $_POST['font'], time()+3600); // save cookie for 1 h
		echo "Font saved";
	}
?>

<!doctype html>
<html>
	<head>
		<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	</head>
	<body>
		<h2>
		<?php 
			// define standard fontsize
			$standardFontSize = "16";
			
			// check if cookie is set, when yes -> load it, if not -> load standard
			if (isset($_COOKIE['fontsize'])) {
				echo $_COOKIE['fontsize'];
			} else {
				echo $standardFontSize;
			}
		?>
		</h2>
		
		<br />
		
		<button class="changefont" data-font="standard">Standard</button>
		<button class="changefont" data-font="small">Small</button>
		<button class="changefont" data-font="big">Big</button>
	
	<script type="text/javascript">
		$(".changefont").click(function() {
			var font = $(this).data("font");
			
			$("h2").html(font);
			
			$.ajax({
				url: "fontsave.php",
				method: "POST",
				data: "font="+font,
				success: function(html) {
					alert(html);
				}
			});
		});
	</script>
	</body>
</html>

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

3 个答案: