jquery.cookieを使ってページのフォントサイズ変更ナビ実装

こんぬつは、ミート肉です。

jquery.cookie.jsを使ったページフォントサイズ変更での失敗と改善策をメモです。

とある案件でjquery.cookie.jsを使ってページフォントサイズ変更ナビを実装してたんですけど
「なんだか動きがおかしいぞ?」
と思ってよくよく見てみると、

ページA:サイズ『大』に変更

ページB:サイズ『大』で表示

ページC:サイズ『大』で表示、『小』に変更

ページB:サイズ『小』で表示

ページA:サイズ『大』で表示(←コレ!!)

ぅわぁ~(;◔ิд◔ิ)

で、これがなぜ起きるかって話なんですよ。
基本はこう

$.cookie(‘KEY’,’VALUE’,{para})

    • ‘KEY’⇒クッキーの名称
    • ‘VALUE’⇒クッキーの値
    • {para}⇒各種パラメータ
      expires 有効期限(日数)
      path 有効なパス(ドメイン全体で利用したい場合は’/’を設定)
      domain 有効なドメイン
      secure HTTPS接続の場合のみにcookieを送信(デフォルトはfalse)

で、実際のソースがこちら

$(function(){

/*– 初期設定 –*/

var history = $.cookie(‘fontSize’);

var elm = $(‘body’);

var FontChange = $(‘#FontChange’);

var DefaultFontSize = ‘fontsizeM’;

//変数が空ならfontMを、空でなければクッキーに保存しておいたものを適用

elm.removeClass();

(!history)? elm.addClass(DefaultFontSize):elm.addClass(history);

var BodyClass = $(‘body’).attr(‘class’);

$(‘#FontChange dd’).removeClass();

FontChange.find(‘dd#’+BodyClass).addClass(‘Select’);

//クリックしたら実行

$(‘#FontChange dd’).click(function(){

$(‘#FontChange dd’).removeClass();

$(this).addClass(‘Select’);

//クリックした要素のID名を変数にセット

var setFontSize = this.id;

//クッキーに変数を保存

$.removeCookie(‘fontSize’);

$.cookie(‘fontSize’, setFontSize,{ path:’/’ });

//一度classを除去して、変数をclassとして追加

elm.removeClass().addClass(setFontSize);

});

});

多少無理あるところはご愛嬌で。
んで、味噌なのが28行目の

$.removeCookie(‘fontSize’);

これ。
ボタンをクリックしたときにクッキーの値を入れ替える処理で、元の値を一回クリアしないとそれぞれボタンを押したページで値をユニークに持ってしまうという動きをしてしまうんです。

や、多分オイラの書き方が悪かったのかもしれないけど、一先ずこれで解決しました。
ふぅ・・・。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です