jqueryでのフォント変更について

質問

今jqueryを勉強していまして、
今回サイトでよくある大中小ボタンを押すとサイト全体のフォントが変更されるように
なっているものを制作しようと思っています。

実際実装はできるのですが、キャッシュに入れ次アクセスしても同じフォントサイズ（フォントの大を押してみていた人が、またアクセスした際に同じ）のままでいてほしいんですね。

いろいろと調べましてやったのですがなかなかうまくいかず、
ご教示して頂ければ幸いです。

jquery.jsと、
jquery.cookie.jsは入れています。

jqueryとcssを掲載します。
自分の考えとしましては、boxという箱にclassname(bodyに大きさによって振り分けるためのクラス)と、保持する期間、あとサイトのパスを入れればいいのではないかと思ってるのですが。。。

fontswictherはリストをくくっている親のul要素のID名です。
あとちなみにですが、下記のjsをスマートにまとめられる書き方はございますでしょうか。
そちらも一緒に教えて頂ければ幸いです。

$("#fontswitcher li").attr({href:$.cookie('box')});

var classname = "font-s , font-m , font-l";
$("#fontswitcher li:eq(0)").click(function(){
$('body').removeClass(classname);
$('body').addClass('font-s');
$.cookie('box',classname,{expires:10,path:'/'});
});
$("#fontswitcher li:eq(1)").click(function(){
$('body').removeClass(classname);
$('body').addClass('font-m');
$.cookie('box',classname,{expires:10,path:'/'});
})
$("#fontswitcher li:eq(2)").click(function(){
$('body').removeClass(classname);
$('body').addClass('font-l');
$.cookie('box',classname,{expires:10,path:'/'});
})

body.font-s{
font-size:10px;
}
body.font-m{
font-size:12px;
}
body.font-l{
font-size:14px;
}

お忙しい中恐縮ではございますが、
おわかりになる方、ご教示いただければ幸いです。
どうぞ宜しくお願い致します。

回答No.1

LancerVII · ベストアンサー

こんにちは。

addClassを使うと、removeClassが必要だったり面倒でしたので以下のようにしてみました。
(参考にならないかもしれませんが)

==== HTML
<ul id="fontswitcher">
<li>小</li>
<li>中</li>
<li>大</li>
</ul>

==== js

$().ready ( function() {
// フォントの大きさ
var FSIZE = new Array ( '0.8em', '1.0em', '1.2em' );
// ※A クッキーより設定されているフォントサイズを取得
var def = $.cookie('box');
if ( def !== null ) {
// クッキー情報が取得できた場合は取得したフォントサイズでbodyに設定
// すなわち取得できなかった場合はなにもしない
$('body').css ( 'font-size', def );
}
$('#fontswitcher').find('li').click ( function() {
// #fontswitcher内の全てのliにclickイベントを設定
// クリックされたliのindexを利用してフォントサイズを取得(小:0番目,中:1番目,大2番目)
// すなわち小の場合はFSIZE[0]なので0.8emが設定
var size = FSIZE[$(this).index()];
// 取得したサイズをクッキーに設定
// これにより次回アクセス時に※Aの処理で選択されたフォントサイズを取得できる
$.cookie ( 'box', size );
// bodyに選択されたフォントサイズを設定することにより画面上のフォントサイズが変更される
$('body').css ( 'font-size', size );
});
});

お礼

こんにちは。

LancerVIIさんのおかげでクッキーの使い方やスマートに書く方法が学べまして、本当に感謝感激です。
どうもありがとうございました。

クッキーの動作も問題なくできてますし、わかりやすいご説明本当にありがとうございました。webデザイナーとしてやっとjqueryが多少ではありますが自力で書けるようになってきたので、すこしずつ難しいことに挑戦して壁にぶつかることは多いですが、お時間があった際にでもまた教えて頂ければ幸いです。

どうもありがとうございました。また宜しくお願い致します。