cookieで保存してbuttonの色を変えたい

お店の空席確認ができるアプリを作っています

cookieを使った実装をしているのですが

うまくいかないのでアドバイスいただけたらと思います

<haml> //buttonは複数あります %input#tweive{type: "button", value: "12", class:"btn"} <js> $( function () { $('.btn').click(function(){ $('#tweive').css("color","red"); }); function color($color){ if( $color == undefined ){ var $color = $.cookie( 'color' ); if( $color == undefined ){ var $color = '#F7FE2E'; } } $.cookie( 'color', $color, { expires: 7 } ); $( 'body' ).css( { 'color': $color } ); } });

buttonの色は変わりますがcookieの保存がうまくいっていないようです
cookieに色を保存してリロードした際に変えた色をキープしようとしています
ログアウト時には元に戻るようにします

cookieの保存を実装した際にもリロードで色のキープができないので教えていただけたら助かります

m.ts10806

2020/01/24 05:12

コードはマークダウンのcode機能を利用してご提示ください。「うまくいかない」は誰にも何も伝えない表現なので起きている現象を具体的に記載してください。「調べたけどわからなかった」しか書かれてないと他人には何も調べてないのと同じです。何を調べ何を試したのか具体的に記載してください。

D41En

2020/01/24 06:17

ありがとうございます

x_x

2020/01/24 06:35

color() を呼び出しているところを書いてもらえますか？

行動規範の内容に同意します

回答1件

ベストアンサー

順番に追っていくとすると、まず色が変更している理由は$('.btn').click(function() { ... })の部分が適用されているためです。

そしてcookieに値が保存されない理由はcookieに値を保存する処理を関数color()で定義していますが、その関数とボタンのクリックイベントと紐づけていないためになります。

js
1$(function () {
2  // 色が変わっているのはこの部分のおかげ
3  $('.btn').click(function () {
4    $('#tweive').css("color", "red");
5  });
6 
7  // 関数は宣言しているけど、クリックイベント に設定していないので動かない
8  function color($color) {
9    if ($color == undefined) {
10      var $color = $.cookie('color');
11      if ($color == undefined) {
12        var $color = '#F7FE2E';
13      }
14    }
15    $.cookie('color', $color, {
16      expires: 7
17    });
18    $('body').css({
19      'color': $color
20    });
21  }
22});