jQuery：クッキーにclassを保持したい

Question

文字サイズ変更で、jQueryとクッキー用のプラグインを読み込んで利用しているのですが、それに付随してclassも保持できないかなと思っています。
このclassを利用して別のHTML要素を触りたいなと思っています。

下記のコードでは、（ページ遷移させても）文字サイズ変更は動作していますが、classの付与はうまくいきません。
何かヒントを得られればと思っています。
よろしくお願いいたします。

<link id="css_txt_size" href="txt_normal.css" />

<dd class="txt_normal"><a href="javascript:switchTxtsize('txt_normal');">標準</a></dd>
<dd class="txt_big"><a href="javascript:switchTxtsize('txt_big');">大きく</a></dd>

$(function(){
  if ($.cookie('style01')){
    switch($.cookie('style01')){
      case 'txt_normal': 
        $('.txt_big').removeClass('txt_big--trigger');
        $('#css_txt_size').attr({href:'txt_normal.css'});
      break;
      case 'txt_big':
        $('.txt_big').addClass('txt_big--trigger');
        $('#css_txt_size').attr({href:'txt_big.css'});
      break;
    }
  }
});

function switchTxtsize(cssname){
  var cssurl= cssname+'.css';
  $('#css_txt_size').attr({href:cssurl});
  $.cookie('style01',cssname,{expires:30,path:'/'});
}

Answer 1

HTML上に書かれたJS構文から、switchTxtsizeの関数が参照できないせいでした。
function()...で囲われた中で定義された関数・変数は、スコープの関係で参照できません。
一旦下記で動作しましたが、JS上でイベントの関連付けをする形に改めた方が良いかもしれません。

<!-- switchTxtsizeを実行しようとしても、参照できない -->
<a href="javascript:switchTxtsize('txt_normal');"> 

$(function(){
  if ($.cookie('style01')){
    switch($.cookie('style01')){
      case 'txt_normal': 
        $('.txt_big').removeClass('txt_big--trigger');
        $('#css_txt_size').attr({href:'txt_normal.css'});
      break;
      case 'txt_big':
        $('.txt_big').addClass('txt_big--trigger');
        $('#css_txt_size').attr({href:'txt_big.css'});
      break;
    }
  }

  // この領域に定義されている変数・関数は外部から参照不可能
});

// 外に出す
function switchTxtsize(cssname){
    var cssurl= cssname+'.css';
    $('#css_txt_size').attr({href:cssurl});
    $.cookie('style01',cssname,{expires:30,path:'/'});
};

Comments

[aurized]

コメントありがとうございます。
私の質問のソースが記述ミスで、実際はいただいたソースのように`function()`は`$(function()`の外に記述しておりました。（質問のソースを後ほど修正いたします）
その折に、文字サイズ変更自体は動作しておりますが、class付与が動作しないんですよね…。
「JS上でイベントの関連付けをする形」というのはどういう形でしょう。
よろしければヒントをいただければと思います…。

[yamato_hikawa]

上記修正で、ロード時にクラスが付加されるようになりました。
遷移後のページにクラス付与の動作をさせるこの関数の記述がない、とかではないですよね？

[yamato_hikawa]

現状のJSに書かれている動作をまとめます。

⚫︎ロード時
・クッキーの有無をしらべる
・クッキーにstyle01の値が設定されている場合、「大きく」の文字にクラスを付与、または外す動作をさせる。さらに特定のCSSを設定する。

⚫︎ボタンクリック時
・特定のCSSを設定する
・クッキーに値を保存する

上記以外の動作は書かれていません。
ロード時、クリック時にそれぞれ、何か本当はさせたい動作が抜けていませんか？

[aurized]

再度のコメントありがとうございます。解決できました！
`$(function()` の箇所に追記して、欲しい動作が得られました。

```javascript
$(function(){
if ($.cookie('style01')){
switch($.cookie('style01')){
case 'txt_normal':
$('.txt_big').removeClass('txt_big--trigger');
$('#css_txt_size').attr({href:'txt_normal.css'});
break;
case 'txt_big':
$('.txt_big').addClass('txt_big--trigger');
$('#css_txt_size').attr({href:'txt_big.css'});
break;
}
}

$('.txt_big').on('click',function(){
$('.txt_big').addClass('txt_big--trigger');
});
$('.txt_normal').on('click',function(){
$('.txt_big').removeClass('txt_big--trigger');
});
});
```

> 遷移後のページにクラス付与の動作をさせるこの関数の記述がない、とかではないですよね？
> ロード時、クリック時にそれぞれ、何か本当はさせたい動作が抜けていませんか？
これらご指摘の記述が抜けていたということですよね…。

また、ロード時とボタンクリック時のご説明もありがとうございます。
どうも私は特にクッキーの使い方が分かっていないようです。

勉強になりました。ありがとうございました。

Answer 2

CSSファイルを切り替えているならclassを付け替える意味がないと思いますが？

Comments

[aurized]

コメントありがとうございます。
文字サイズ変更とは別に、classキッカケで他のhtml要素をいじりたいなと思っています。

Answer 3

jquery-cookieプラグインですよね。
「不安定」ということは、ちゃんと読み込んでから動作していない、というような感じです。
jqueryを読み込んでから、プラグインを読み込んでますよね？

また、

$(function(){
console.log(document.cookie);
  if ($.cookie('style01')){
console.log($.cookie('style01');
    switch($.cookie('style01')){
```ってな感じで追っかけてみたらどうですか？
または、ブレークポイントを置いてみるとか。

Comments

[aurized]

コメントありがとうございます。

> jqueryを読み込んでから、プラグインを読み込んでますよね？
文字サイズ変更は動作していますので、読み込み自体は大丈夫だと思います。

[shi_ue]

いや、違います。
ボタンの動作と、$(function)の動作では違うんです。
あ、でもプラグインだと、jquery読んでないとエラーになるかな・・・