- ベストアンサー
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>
関連するQ&A
- cookie.jquery.jsでのcookie
cookie.jquery.jsでのcookie取得について 現在、cookie.jquery.jsでcookieを以下のように取得しています。 $(window).load(function(){ $.cookie("access",$('body').addClass('access'));}) たとえば、サイトを表示して10秒後にcookie取得したいと思い、setTimeoutを使用すれば良いと思ったのですが、うまく動作しませんでした。 このような使い方はできないのでしょうか？
- ベストアンサー
- JavaScript
- jQueryでshow/hideが上手く行かない
入力フィールドとボタンを作成し、ボタンを押すたびに入力フィールドが表示・非表示を繰り返すようにしたいと思っています。 入力フィールドが表示されているときにはボタンは"hide"、非表示の時は"show"が表示されている仕様です。 <div id="input"><input type="text" name="something"></div> <input type="button" id="button" value="hide"> 以下のようにjQueryを組んでみました。 $(document).ready(function(){ if($("#button").attr("value") == "hide"){ $("#button").click(function(){ alert("VALUE=" + $("#button").attr("value")), $("#input").children().hide(), $("#button").attr("value", "show"); }); } else if($("#button").attr("value") == "show"){ $("#button").click(function(){ alert("VALUE=" + $("#button").attr("value")), $("#input").children().show(), $("#button").attr("value", "hide"); }); } }); まず、hideボタンを押すとhideのアラートが出てフィールドが非表示になり、showというボタンのみが残ります。 次にshowボタンを押すと、showのアラートは表示されますが、フィールドが再表示されず、ボタンもshowのままです。 elseのalertまで行っているのにその後が機能しないのは何故でしょうか？
- ベストアンサー
- JavaScript
- jQueryのclickについて
現在仕事でjQueryを使用して、要素の表示非表示を行うイベントを作成しているのですが、一つ難題がありまして・・・まず下記に簡単に文法を記述しましたのでご覧下さいませ・・・ 『html』 <ul> <li>ボタン1</li> <li>ボタン2</li> <li>ボタン3</li> </ul> <div class="area"><!-- 要素 --></div> <div class="area"><!-- 要素 --></div> <div class="area"><!-- 要素 --></div> 『jQuery』 j$("li").click(function(){ var btnNum = j$("li").index(this); j$(".area").hide(""); j$(".area").eq(btnNum).show(""); }); 上記にしたときに例えば”ボタン1”を押した時に再度”ボタン1”をおすとここでいう一番目の”area”を消去したいのですが、 toggleを使用すると”ボタン1”を押した時に”ボタン2”を押すと再び”ボタン1”を押すと、消去してからの動作をするため二度クリックしないと”area”が表示されません… そこでtoggleの様な動作で、同じボタンを二度押すと対象の要素が消去されるようないい方法ありませんでしょうか？ 折角jQueryを使用しているのでスリムな記述がしたいんですよね・・・ 宜しくお願いします。
- 締切済み
- JavaScript
- jQuery1.4.2、jQueryUI1.8.4、toggle()の
jQuery1.4.2、jQueryUI1.8.4、toggle()の状態を初期化 jQuery1.4.2、jQueryUI1.8.4にて、 toggle()を使用したあと、別のボタンなどで、そのtoggleの状態を初期化することは出来るのでしょうか。 <a id="button">ボタン</a> <div id="info"> <a id="close">閉じる</a> <p>あいうえお</p> </div> <script> $('#button').toggle( function(){$('#info').show('slide')}, function(){$('#info').hide('slide')} ); $('#close').click(function(){$('#info').hide('slide');}); </script> 「ボタン」を押して#infoを表示した後、「閉じる」を押して非表示にし、 もう一度「ボタン」を押すと、hide()が実行されてしまうため、このときにshow()が実行されるようにしたいのです。 フラグを使って.click()で切り替えれば作れますが、 せっかくtoggle()のようなメソッドがあるなら、それを利用できないかと思ったのですが。
- ベストアンサー
- JavaScript
- jquery.cookieを利用しての表示
cookieを使用した表示内容の変更を行おうとしています たとえば <a href="javascript:void(0);" onclick="Display('no1')">ID1</a> を押したら <div id="ID1"><p>これはID1のエリアです</p></div> が出てきて、cookieが残っている限り上記文章が表示されている 以前の質問に載っていたソースを使用し、製作しようと思っていたのですが リンク部分を下記のようにすると <a href="javascript:void(0);" onclick="Display('no1')">ID1</a> ↓ <a href="next.html" onclick="Display('no1')">ID1</a> 当たり前といえば当たり前なのですが リンクをクリックした際に、切り替わったエリアが一瞬表示し ページに移動してしまいます 私としてはページが移動した後に切り替わってほしいのですが なかなか上手くいきません 何か良い方法はないでしょうか・・・ 下記元ソースになります <script type="text/javascript"> function Display(no){ switch(no){ case 'no1': $("#ID1").show(); $("#ID2").hide(); $("#ID3").hide(); $.cookie('area',no,{expires:1}); break; case 'no2': $("#ID1").hide(); $("#ID2").show(); $("#ID3").hide(); $.cookie('area',no,{expires:1}); break; case 'no3': $("#ID1").hide(); $("#ID2").hide(); $("#ID3").show(); $.cookie('area',no,{expires:1}); break; } } $(function($){ if($.cookie('area')){ Display($.cookie('area')); }else{ Display('no1'); } }); </script> <h5><a href="javascript:void(0);" onclick="Display('no1')">ID1</a></h5> <h5><a href="javascript:void(0);" onclick="Display('no2')">ID2</a></h5> <h5><a href="javascript:void(0);" onclick="Display('no3')">ID3</a></h5> <div id="ID1"><p>これはID1のエリアです</p></div> <div id="ID2"><p>これはID2のエリアです。</p></div> <div id="ID3"><p>これはID3のエリアです。</p></div>
- ベストアンサー
- JavaScript
- jQueryで設定したイベントハンドラが消える
jQueryについての質問です。 ちょっと言葉での説明が難しいので、具体的なコードを記載します。 === JavaScript === var clicked = function () { alert(1); }; var jqButton = $("<input type='button' value='test' />"); jqButton.click(clicked); $(function() { $("#showButton").click(function () { $("#test").html(jqButton); }); $("#hideButton").click(function () { $("#test").html(""); }); }); === HTML === <input type="button" id="showButton" value="show" /> <input type="button" id="hideButton" value="hide" /> <div id="test"></div> showボタンをクリックすると、testボタンが表示されます。 hideボタンをクリックすると、testボタンが消えます。 testボタンをクリックすると、alert(1) が実行されます。 という内容なのですが、一度hideしてから再度showして現れたtestボタンをクリックしても、 何も起きません。 仮に、jqButton.click(clicked); の部分を、 jqButton[0].attachEvent("onclick", clicked); などにすると、再表示させたtestボタンも動作します。 これはjQueryのイベントハンドラ設定APIを使った時特有の症状だと思うのですが、 なぜこのような結果になるのでしょうか。 てっきり、$.click()でイベントハンドラを設定すると、 内部でattachEventとかaddEventListnerとかが走るだけだと想像してましたが・・・ また、attachEventなど使わずに、jQueryの機能を使って、 再表示させてtestボタンも動作させるには、どうしたらいいでしょうか。 ご存知の方いましたら、お願い致します。
- ベストアンサー
- JavaScript
- jQueryでリスト項目の表示・非表示を切りかえる
jQueryに詳しい方教えてください。 下記のようなHTMLがあって、 jQueryを使って<li>要素の表示／非表示を切り替えたいのです。 ---------------- HTMLスクリプト <ul class="test"> <li>項目1</li> <li>項目1</li> <li>項目1</li> </ul> 切り替えるタイミングはxmlのデータ内にflagを立てています。 flagの値は取得できました。（確認済み） 仕様としては、flagの値が 0の時は→<li>要素の1つ目と2つ目を表示させる。 1の時は→<li>要素の3つ目のみを表示させる。 2の時は→<li>要素のすべてを表示させる。 ということをしたいのです。 ですが、なぜかうまくいきません。 以下のように書きました。 if(flag==0){ $(".test li:eq(2)").hide(); }else if(settlementflag==1){ $(".test li:eq(0)"), .test li:eq(1)").hide(); }else if(settlementflag==2){ //何もしない }; そもそもこうゆう書き方で合っているのしょうか？ jQueryを勉強したてで、恥ずかしいばかりですが、 ご教授のほど宜しくお願いいたします。
- ベストアンサー
- AJAX
- jQueryのui.tabのcookieについて
jQueryのui.tabのcookieについて ブログのサイドバーにタブメニューを設置して、ユーザーがタブをクリックするとそのタブを記憶して同じブログ内の別のページへ移動してもそのタブの内容が表示されるというものを作ろうと思い、 jQueryのui.tabで作ったタブにjquery.cookieを利用してクッキーを保存するようにしたんですが… $('#container1').tabs({event:'click',cookie: { expires: 30 },cache:true}); タブをクリックして同じブログ内の別のページへ移動するとタブが初期状態に戻ってしまいます。 どなたか改善策を知っているかたは教えてもらえないでしょうか？？よろしくお願いします！！
- ベストアンサー
- JavaScript
- if文について
おはようございます。 if文について聞きたい事があります。 現在jqueryでJSONを使用して「もっと読む」みたいな感じで、 ボタンをクリックすると指定した数だけ画像が表示されるという物を作っているのですが、 その際にif文で、全ての点数を超えたらボタンを非表示にし、点数を超えていなかったら表示するという物を作っているのですが、 現在、 （addedは今までの点数を加えて来たもので、 fillterが全ての点数で、 $buttonがボタンとなります。） if(added > fillter.length){ $button.hide(); }else{ $button.show(); } とやると、点数を超えても表示されたままですが、 if(added < fillter.length){ $button.show(); }else{ $button.hide(); } とやると、点数を超えたら非表示になります。 どういう事が起こっているのでしょうか。 全文がやや長いため、省略しております。 大変申し訳ありませんが、教えていただきたいです。
- ベストアンサー
- JavaScript
- jQueryでxmlの異なるタグ要素を取得したい。
jQueryを最近勉強したての者です。 詳しい方、どうか教えて下さい。 HTMLにxmlのデータを読み込ませようとしています。 概略をお話しすると、 htmlファイルによって、xmlの別々の要素を取得したいのです。 やりたいメソッドは同じです。 別々の要素の中のデータによって、imgの表示／非表示を切り替えたいのです。 問題は、対象となるhtmlファイルが複数あり そのhtmlファイルによって、参照するxmlのタグが異なる事なんです。 xmlは、以下のように<shopdata>をルートノードとし、以下のような感じです。 --------------------- <?xml version="1.0" encoding="utf-8"?> <shopdata> <item> <name1>0</name1> <name2>1</name2> <name3>0</name3> </item> </shopdata> --------------------- <name*>～</name*> の中のデータは、0もしくは1なのですが 0の時はimgを表示 1の時はimgを非表示させようと考えています。 ただ<name1><name2><name3> とタグ名がバラバラなんです。 ※おしりの数字が違うだけで、規則的ではあります。 ちなみにhtmlは複数あって a.htmlの時は→xmlの<name1>を参照 b.htmlの時は→xmlの<name2>を参照 c.htmlの時は→xmlの<name3>を参照 という感じです。 ※htmlファイル名は特に規則的ではなく、いろいろなファイル名がついています。。。 最初、考えたのは、 htmlのどこかに、id="1"と入れて、idが1の時は、<name1>の要素を取得し、 htmlのどこかに、id="2"と入れて、idが2の時は、<name2>の要素を取得し… っていうことを考えたのですが、それもどのように書いたら良いのかが分からないんです。 そもそも、そういった事は可能なのでしょうか？ ちなみのhtmlのbodyタグ自体がテンプレートでできているので、 idをどこかにふるとしたら、head内とかになるのしょうか？ それぞれ、ボタンの表示は、 if文を使って、show(),hide()メソッドを使うとは思うのですが… 詳しくコードを教えていただけたら、助かります。 どうか、宜しくお願いいたします。
- ベストアンサー
- AJAX
お礼
LancerVIIさん ご丁寧な解説に本当に感謝いたします。 とても分かりやすく、 スクリプトを含め、考え方の流れも教えていただき とても分かりやすかったです。 一つ一つかみくだいて読みました。 そもそも考え方が逆だったんですね。 cookie自体がよく分かっていないですね、私。。。 おかげさまで、なんとか解決できました！！ スクリプトの中には、 他にも今後の活かせる技が入っていたので、 今後も見返して、参考にします。 まずは取り急ぎ御礼まで。 大変たすかりました！ 本当にありがとうございました。