- ベストアンサー
cookie.jsを使ってクッキーを利用する方法
- JavaScriptでクッキーを利用する方法についての設定方法を調べています。
- 現在、JavaScriptを使用して画像やリンク、位置データを切り替える設定を行っていますが、ページを移動すると画像のデータがリセットされてしまいます。
- このような場合には、cookie.jsを使用してクッキーを利用することで、データの保持を実現することができます。具体的な設定方法についてはわかりませんので、アドバイスをいただけると助かります。
- 00saka
- お礼率75% (3/4)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでしょうか。 <script src="jquery.js"></script> <script src="jquery.cookie.js"></script> <script type="text/javascript"> // クッキーAAAがA if($.cookie('AAA') == "A"){ $(function(){ $("a#AAA").attr("href","#"); $("a#AAA img").attr("src","images/spacer.gif"); $("a#AAA img").css("border","10px solid #f00"); }); } // クッキーAAAがB if($.cookie('AAA') == "B"){ $(function(){ $("a#AAA").attr("href","http://www.a01"); $("a#AAA img").attr("src","images/a01.jpg"); $("a#AAA img").css("border","10px solid #039"); }); } $(function(){ // input#btnAがクリック $("input#btnA").click(function() { $("a#AAA").attr("href","#"); $("a#AAA img").attr("src","images/spacer.gif"); $("a#AAA img").css("border","10px solid #f00"); $.cookie("AAA","A",{expires:30,path:'/'}); }); // input#btnBがクリック $("input#btnB").click(function() { $("a#AAA").attr("href","http://www.a01"); $("a#AAA img").attr("src","images/a01.jpg"); $("a#AAA img").css("border","10px solid #039"); $.cookie("AAA","B",{expires:30,path:'/'}); }); }); </script> <style type="text/css"> img{ border:none; } input{ width: 64px; height: 64px; cursor: pointer; } input#btnA{ background: transparent url(images/clear.gif) no-repeat 0pt 0pt; } input#btnB{ background: transparent url(images/a01.gif) no-repeat 0pt 0pt; } </style> <a href="http://www.a01" id="AAA"><img src="images/a01.jpg" /></a> <div class="AAA"><a href="#" class="prev_AAA">戻る</a><a href="#" class="next_AAA">進む</a></div> <form> <input id="btnA" value="" type="button" /> <input id="btnB" value="" type="button" /> </form>
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
cookie.jsってjQueryのやつですよね。 どうせjQuery使うなら、抜本的にjQuery使って きれいに書き換えた方が、後々のためにもよろしいかと... まずjQueryの基本的な使い方を習得されてはいかがですか？ http://semooh.jp/jquery/ http://api.jquery.com/category/core/ その後cookie.jsの使い方をマスターする http://plugins.jquery.com/project/Cookie その前に、HTML、CSS、Javascriptも基本は理解しよう
補足
説明不足で申し訳ございませんでした。 cookie.jsはjQueryのものになります。 リンク先のサイトも参考にさせていただきます。 もし何か他にも参考になるサンプルなどがありましたらお教えください。 初心者のものでなかなか苦戦しております。 引き続きよろしくお願いします。
お礼
お礼が遅くなってしまい申し訳ありません。 思ってた通りのものが出来そうです。 これを参考にいろいろと試してみたいと思います。 ありがとうございました。