- ベストアンサー
jQueryギャラリーのボタン動作にお悩みの方へ
- jQueryで作成したギャラリーボタンの動作にお悩みの場合、'one'clickで一度だけ実行する処理を使用しているため、再度ボタンを押しても動作しないことがあります。
- また、プロフィールボタンを押した際には写真を引っ込めてプロフィールを表示することはできますが、再度ギャラリーボタンを押すと動作しないため、'one'を解除する方法が必要です。
- 調査の結果、'unbind'関数を使用して'one'の解除が可能です。また、他の方法としても、'bind'関数を使用することで動作を制御することができます。
- nekoze-man
- お礼率76% (26/34)
- その他(ソフトウェア)
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
自分でフラグとか設けて制御すればいいんじゃないかな。 以下のサンプルでは右に出しているliには'flag'が立っている。 （上位ULには現在出しているliのjQueryオブジェクトを'current'に記憶している） <head> <style type="text/css"> ul,li{ list-style-type:none; margin:0; padding:0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#Menu li').click(function(){ if($(this).data('flag')) return; $(this).animate({marginLeft:'100px'},'slow'); $(this).data('flag',true); if($(this).parent().data('current')) { $(this).parent().data('current').animate({marginLeft:'0px'},'fast').data('flag',false); } $(this).parent().data('current',$(this)); }); }); </script> </head> <body> <ul id="Menu"> <li>AAAA</li> <li>BBB</li> <li>CCCCC</li> </ul> </body>
お礼
すみません！ まだ解決していないのに終了させてしまいました！ また引き続き投稿させてもらいましたのでよろしければお願いします！！ http://oshiete.goo.ne.jp/qa/6063457.html
補足
ご質問に答えてくださってありがとうございます！！ とりあえずギャラリーボタンを押した後の、更にまた押したときに動かないようになったのですが、その後の他のメニューボタンを押したときの解除がうまくいきません。 いまずっと色々とやっていたのですがなかなかうまくいかず。。 僕の場合liそれぞれにclassを振り分けているのですがそういう場合はどうすればよろしいのでしょうか？ このような感じで振り分けています。 <ul> <li class="homebtn"><a href="#">home</a></li> <li class="probtn"><a href="#">profile</a></li> <li class="gallbtn"><a href="#">gallery</a></li> <li class="blogbtn"><a href="#">blog</a></li> </ul> そしてsteel_gray様に教わったのをこのような感じでやってみたのですが。。 //ギャラリーBOX $(function(){ $("#main_manu li.gallbtn").click(function(){ if($(this).data('flag')) return; $("#gallery_manu_box li.ind_pho").show(0).animate({left: "+=820px"},1000); $("#gallery_manu_box li.ita_pho").show(0).animate({left: "+=1080px"},1200); $(this).data('flag',true); if($(this).parent().data('current')) { $("#gallery_manu_box li.ind_pho").hide(0).animate({left: "-=820px"},1000); $("#gallery_manu_box li.ita_pho").hide(0).animate({left: "-=1080px"},1200); $(this).data('flag',false); } $(this).parent().data('current',$(this)); }); }); これではダメだろうなというはなんとなく見て理解できるのですが、全くほかのやり方が思いつきません。。。 それと、steel_gray様の書かれたサンプルの"this"と言うのは、"#Menu li"のことを指しているのでしょうか？ すみません質問ばかりで。。 やはりjavascriptをちゃんと勉強しなくてはダメですね。。 お時間あればお返事よろしくおねがいします！！