- ベストアンサー
jQueryでcookieの取得
jQuery初心者のため、教えてください。 やりたいことは 「非表示ボタン」というボタンがあり それをクリックした人は 別のある要素を、ずっと非表示にする。 …ということです。 「非表示ボタン」をクリックした人の情報をcookieで取得し、 それをif文で条件分岐し、 その該当の要素をhideとshowで切り分けるのはわかるのですが、 cookie値の取得の仕方とかが、いまいち分かっておりません。 こんなあいまいな質問で申し訳ないのですが、 特にcookieの取得のところを教えていただけると、 助かります。 宜しくお願いいたします。
- mc0816
- お礼率94% (69/73)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 cookieはあくまでそのブラウザ自身が非表示ボタンを押したかどうかしかわかりませんが、大丈夫でしょうか。 というのも >「非表示ボタン」をクリックした人の情報をcookieで取得し、 という部分がクリックしたユーザが集約されているようなものをイメージしているのかなと思ったのです。 例えば、cookieだけでは管理者側では誰が非表示をクリックしたかはわからないということです。 cookieを消してしまえばまた表示されてしまいます。 アクセスした人のcookieからクリックしたかどうかを取得してというのが正しいです。 手順としては 「非表示ボタン」をクリック⇒クッキーへ書き込み⇒要素を非表示 次にアクセスされたとき クッキーから読み込み⇒要素を非表示 となります。 jQueryを利用しているのであればjquery.cookie.jsのライブラリを利用すると簡単に扱えます。 クッキーから値を取得 $.cookie ( 'name' ); クッキーへ値を書き込み $.cookie ( 'name' ); です。 以下はサンプルとなります。動きを見てみてください。 各ボタンをクリックすると指定されたエリアが非表示となります。 ブラウザを更新してみても選んだところは非表示になっていると思います。 クッキーを初期化を選んで更新するとまた全て表示されます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQueryでcookieの取得</title> <style type="text/css"> .hdn { width:300px;height:60px;background-color:#ccc; } </style> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript" src="/js/jquery.cookie.js"></script> <script type="text/javascript"> $().ready ( function() { var hiddenId = $.cookie ( 'hiddenid' ); var hiddenArray = hiddenId != null ? hiddenId.split(',') : new Array(); for ( var i = 0; i < hiddenArray.length; i ++ ) { if ( hiddenArray[i] != '' ) $('#' + hiddenArray[i] + ' .hdn').hide(); } $('#hiddenArea button').click ( function() { var $obj = $(this); alert ( $obj.html() + 'を非表示にします。' ); $obj.parent().find('.hdn').hide(); var id = $.cookie ( 'hiddenid' ); if ( id == null ) id = ""; id += $obj.parent().get(0).id + ','; $.cookie ( 'hiddenid', id ); }); $('#btn-clear').click ( function() { // hiddenid値をクリア $.cookie ( 'hiddenid', null ); }); }); </script> </head> <body> <button id="btn-clear">クッキーを初期化</button> <hr /> <div id="hiddenArea"> <div id="hdn-1"> <button>非表示1</button> <div class="hdn">このエリアを非表示[1]</div> </div> <hr /> <div id="hdn-2"> <button>非表示2</button> <div class="hdn">このエリアを非表示[2]</div> </div> <hr /> <div id="hdn-3"> <button>非表示3</button> <div class="hdn">このエリアを非表示[3]</div> </div> <hr /> <div id="hdn-4"> <button>非表示4</button> <div class="hdn">このエリアを非表示[4]</div> </div> <hr /> <div id="hdn-5"> <button>非表示5</button> <div class="hdn">このエリアを非表示[5]</div> </div> </div> </body> </html>
お礼
LancerVIIさん ご丁寧な解説に本当に感謝いたします。 とても分かりやすく、 スクリプトを含め、考え方の流れも教えていただき とても分かりやすかったです。 一つ一つかみくだいて読みました。 そもそも考え方が逆だったんですね。 cookie自体がよく分かっていないですね、私。。。 おかげさまで、なんとか解決できました！！ スクリプトの中には、 他にも今後の活かせる技が入っていたので、 今後も見返して、参考にします。 まずは取り急ぎ御礼まで。 大変たすかりました！ 本当にありがとうございました。