JavaScript インクリメントの書き方

解決済

質問者：dsk8
質問日時：2013/11/03 16:57
回答数：3件

JavaScriptのインクリメントをその都度追加する事がないように
for文などで作りたいのですが、上手く動きません。
どの様な書き方をすれば良いかご教授いただきたいです。
よろしくお願いいたします。

===================================

$(document).ready(function(){
$("#navi li#n01 a").click(function () {
$("#navi li#n01 ul").slideToggle("slow");
});
});
$(document).ready(function(){
$("#navi li#n02 a").click(function () {
$("#navi li#n02 ul").slideToggle("slow");
});
});
$(document).ready(function(){
$("#navi li#n03 a").click(function () {
$("#navi li#n03 ul").slideToggle("slow");
});
});

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2013/11/05 18:18

ご質問の「インクリメント」の意味が不明ですが、同じ処理を繰返し記述するのを避けたければ、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>

- 0
- 件

通報する

この回答へのお礼

連絡が遅くなり申し訳ございません。

いただいたソースで無事動きました。
助かりました！ありがとうございます。
JavaScriptもっと勉強します。

通報する

お礼日時：2013/11/10 07:00

No.2

回答者： play_with_you
回答日時：2013/11/03 20:19

本文にインクリメントが一切ないのは何の冗談？

ちなみにそれをそのまま書いても動かないからね。（readyメソッドが上書きされて後から書かれたものしか有効にならない。
$(document).ready(function(){
　for (i=1;1<=3;i++){
　　$("#navi li#n0"+i+" a").click(function () {
　　　$("#navi li#n0"+" ul").slideToggle("slow");
　　});
　}
});
か何かじゃないと。