- ベストアンサー
JavaScriptのインクリメントの書き方
- $(document).ready()関数を使用して、要素をクリックしたときにスライドトグル効果を実装する方法
- for文を使用して要素をクリックしたときにスライドトグル効果を実装する方法
- より効率的な方法で要素をクリックしたときにスライドトグル効果を実装する方法
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
ご質問の「インクリメント」の意味が不明ですが、同じ処理を繰返し記述するのを避けたければ、No2様がご提示なさっているような方法があります。 しかし、同じ処理なら普通は個別にidを振るようなことはせずに、まとめて記述できる方法を考えます。 (個別のidに対する処理にした時点で、同じ処理ではなくなるので…) どのようなHTMLを想定しているのかまったくわかりませんが、以下、簡単な一例です。 (全角空白は半角に) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #navi li a{ color : #000; text-decoration : none; display : block; padding : 5px; font-weight : bold; width : 200px; background-color : #bbd; border : 1px solid #666; border-color : #eee #666 #666 #eee; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1");</script> <script type="text/javascript"> $(function(){ $("#navi li a").click(function(){ $(this).next("ul").slideToggle("slow"); return false; }) .next("ul").slideUp(0); }); </script> </head> <body> <ul id="navi"> <li><a href="#">navi1</a> <ul> <li>navi1 sub1</li> <li>navi1 sub2</li> </ul> </li> <li><a href="#">navi2</a> <ul> <li>navi2 sub1</li> <li>navi2 sub2</li> <li>navi2 sub3</li> </ul> </li> <li><a href="#">navi3</a> <ul> <li>navi3 sub1</li> <li>navi3 sub2</li> </ul> </li> </ul> </body> </html>
その他の回答 (2)
- play_with_you
- ベストアンサー率37% (112/301)
本文にインクリメントが一切ないのは何の冗談? ちなみにそれをそのまま書いても動かないからね。(readyメソッドが上書きされて後から書かれたものしか有効にならない。 $(document).ready(function(){ for (i=1;1<=3;i++){ $("#navi li#n0"+i+" a").click(function () { $("#navi li#n0"+" ul").slideToggle("slow"); }); } }); か何かじゃないと。
お礼
ありがとうございます。 ソースを埋め込んでみましたが動きませんでした。 元々のソースが間違えているのかもしれません。
- kosukejlampnet
- ベストアンサー率44% (126/282)
htmlがないと、回答できません。
お礼
申し訳ございません。 htmlは載せる事が出来ません。
お礼
連絡が遅くなり申し訳ございません。 いただいたソースで無事動きました。 助かりました!ありがとうございます。 JavaScriptもっと勉強します。