単純な関数にクッキーを追加する

Question

1つのdivが開いている（表示している）ときに、ユーザーが最後の状態をremmberするようにクッキーを追加する必要があります。

私はそれが簡単であるべきであることを知っていますが、jsのスクリプトで全部のnoobです。これ以上私の頭よりも驚いています。どんな助力も高く評価されます。私はこのフォーラムでさまざまな例を見てきましたが、それらはcomplectaedと明確ではありません。単純なコードの簡単な解決策を探しています。ありがとうございました！

<script type="text/JavaScript"> 
$(document).ready(function(){  
    $('a.row_view').click(function() { 
     $('.contentPadd.r_view').css('display', 'block'); 
     $('.contentPadd.l_view').css('display', 'none') 
     $('.contentPadd.t_view').css('display', 'none'); 
    }); 
    $('a.list_view').click(function() { 
     $('.contentPadd.r_view').css('display', 'none') //horizontal 
     $('.contentPadd.l_view').css('display', 'block') //list 
     $('.contentPadd.t_view').css('display', 'none') //thumbnails 
    }); 
    $('a.table_view').click(function() { 
     $('.contentPadd.r_view').css('display', 'none') 
     $('.contentPadd.l_view').css('display', 'none') 
     $('.contentPadd.t_view').css('display', 'block') 
    }); 
});          
</script> 

<a class="row_view">1</a>&nbsp;&nbsp;<a class="list_view">2</a>&nbsp;&nbsp;<a class="table_view">3</a> 

<div class="contentPadd r_view">NUMBER 1</div> 
<div class="contentPadd t_view">NUMBER 2</div> 
<div class="contentPadd l_view">NUMBER 3</div> 

Answer 1

私はあなたがここに見つけることができるのCookieハンドラを書いた：Ovenmittsオブジェクトの新しいインスタンスを作成し、これを使用するにはhttp://forrst.com/posts/JavaScript_cookie_handler-JE9

を。次に、bakeCookieメソッドに2つのパラメータ、名前と値を渡します。あなたのclick関数内で、次の操作を行います。

$(document).ready(function() { 
    var cookieObj = new Ovenmitts(); 
    var cookie = cookieObj.admireCookie('opened'); 
    if (cookie === 'a.row_view') { 
    $('.contentPadd.r_view').css('display', 'block'); 
    $('.contentPadd.l_view').css('display', 'none') 
    $('.contentPadd.t_view').css('display', 'none'); 
    } 
}); 

は、あなたがこれを実装するすべての問題を持っている場合は、私に教えてください：

$('a.row_view').click(function() { 
    var cookieObj = new Ovenmitts(); 
    cookieObj.bakeCookie('opened', 'a.row_view'); 
    $('.contentPadd.r_view').css('display', 'block'); 
    $('.contentPadd.l_view').css('display', 'none') 
    $('.contentPadd.t_view').css('display', 'none'); 
}); 

次に、ページのロード時に、admireCookieメソッドを呼び出します。

また、.css('display', 'block')および.css('display', 'none')の代わりに、jQuery .show()および.hide()関数を使用できます。

bakeCookieメソッドを呼び出し、同じ名前（たとえば「開かれた」）を渡して、Cookieを上書きすることができます。そうすれば、どの引出しが開いているかを覚えておく価値を渡すことができます。

Answer 2

Nickに感謝します。

1. 作成したりの.jsファイルにこれを追加します。

   新しいオブジェクトをインスタンス化する//レイアウトをリストするための//クッキーハンドラ、 変数を作成し、//例えばnew演算子を呼び出しますvar myCookie = new Ovenmitts（）; // myCookie.bakeCookie（）などでOvenmittsのメソッドにアクセスできます。var Ovenmitts = function（）{var ctx = this; // cookieを作成する// name、value、 日の3つのパラメータを受け入れる// cookieは名前/値のキー/値のペアを取り、/ days //日はオプションで、セッション終了のデフォルトはctx.bakeCookie = 関数（名前、値、日）{ if（days）{ var date = new Date（）; date.setTime（date.getTime（）+（日数* 24 * 60 * 60 * 1000））; var expires = "; expires =" + date.toGMTString（）; } else {var expires = ""; } return document.cookie = name + "=" + value + expires + "; path = /"; }; //クッキーを読み込みます//名前パラメータを受け取ります（ クッキーの最初の値）。ctx.admireCookie = function（name）{ var nameEQ = name + '='; var ca = document.cookie.split（ ';'）; （var i = 0; i < ca.length; i + = 1）{ var c = ca [i]; while（c.charAt（0）=== "）{c = c.substring（1、c.length）; } if（c.indexOf（nameEQ）=== 0）{return c.substring（nameEQ.length、c.length）; } } return null; }; }; //クッキーハンドラの終わり。

   $（ドキュメント）.ready（関数（）{//プロダクトリストレイアウトのdivスイッチ
   $（ 'a.row_view'）をクリックします（関数（）{VAR cookieObj =新しい Ovenmitts（）;。 cookieObj （）; $（ '.contentPadd.r_view'）; $（ '。contentPadd.l_view'）; hide（）; $（ '。contentPadd .t_view '））（非表示;}）;

   $（' a.list_view '）をクリックします（関数（）{VAR cookieObj =新しい Ovenmitts（）;。 cookieObj.bakeCookie（' 開かれました '' a.list_view '）; $（'。contentPadd.r_view '）。hide（）; // horizo​​ntal $（ '。contentPadd.l_view'）。show（）; //リスト $（ '。contentPadd.t_view'）。hide（）; //サムネイル}）; $（ 'a.table_view'）$ {'cookieObj.bakeCookie（' open '、' a.table_view '）; $（'。contentPadd.r_view ' ）;）;}）; $ {'contentPadd.l_view'}。 var cookieObj = new Ovenmitts（）; var cookie = cookieObj.admireCookie（ 'opened'）; if（cookie === 'a.row_view'）{ $（ '。contentPadd.r_view'）。show（）; $（ '。contentPadd.l_view'）。hide（）; $（ '。contentPadd.t_view'）。hide（）; } var cookieObj =新しいOvenmitts（）; var cookie = cookieObj.admireCookie（ 'opened'）; {0} $ {'contentPadd.l_view'} $ {'contentPadd.l_view'} $ {'contentPadd.l_view'}; （cookie === 'a.list_view'）{ $（ '。 //リスト $（ '。contentPadd.t_view'）。hide（）; //サムネイル} var cookieObj = new Ovenmitts（）; var cookie = cookieObj.admireCookie（ 'opened'）; if（cookie === 'a.table_view'）{ $（ '。contentPadd.r_view'）。hide（）; $（ '。contentPadd.l_view'）。hide（）; $（ '。contentPadd.t_view'）。show（）; } // END製品リストのレイアウト divスイッチ

2. これを私のtest.htmlページに追加しました。また、JSファイルを追加します。

   <script language="javascript" src="YOURJSFILE.js"></script> 
       <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js.js"></script> 
   
   <a class="row_view">TEST 1</a>&nbsp;&nbsp; 
   <a class="list_view">TEST 2</a>&nbsp;&nbsp; 
   <a class="table_view">TEST 3</a> 
   

   は私のtest.htmlというページ

<div class="contentPadd r_view">TEST 1</div> 
<div class="contentPadd t_view">TEST 2</div> 
<div class="contentPadd l_view">TEST 3</div> 

THATS ITにこれを追加しました。 - PHPに追加 - 画像イメージ - エキスパンド - 等