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;
}
お忙しい中恐縮ではございますが、
おわかりになる方、ご教示いただければ幸いです。
どうぞ宜しくお願い致します。