phpのループのカウントに合わせて、javascriptのidを動的に変えたい。phpの変数をjavascriptで使う方法。

Question

ドロップダウンリストを１つのページに複数付けたいのですが、javascriptのid名を動的に変えることが出来ずに困っています。

htmlはphpのループで書き出し、そのカウントに合わせて、javascriptのidを変えていきたいと考えています。
html側はphpで変えていけるのですが、javascript側を変えられなくて困っています。

<div class="menu<?=h($cnt)?>">メニュー</div>
<nav id="menu_sub<?=h($cnt)?>">
 <ul class="menu_list clearfix">
  <li>
   <a href="a.html" class="menu_link">メニュー１</a>
  </li>
 </ul>
</nav>

php側は$cntにループした数字が入っていきます。

$(function(){
 $(".menu").click(function(){
  $("#menu_sub").slideToggle(200);
 });
});

menuとmenu_subを
menu1
menu2
という風にカウントアップしていきたいのですが、やり方がわかりません。

よろしくお願いいたします。

Comments

[kei344]

コードはコードブロックで囲んでください。```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

[hiro2016]

教えていただきまして、ありがとうございました。
修正いたしました。

Answer 1

クリックすると下に出てくるドロップダウンリストを同じページに20個設置する予定なので、20個分のユニークなidが必要なのではと考えています。

ユニークな id 無しでも開閉くらいなら可能ですよ。

<div class="menu">
	<div class="menu_title">メニュー</div>
	<nav class="menu_sub">
		<ul class="menu_list clearfix">
			<li><a href="a.html" class="menu_link">メニュー１</a></li>
		</ul>
	</nav>
</div>
<div class="menu">
	<div class="menu_title">メニュー</div>
	<nav class="menu_sub">
		<ul class="menu_list clearfix">
			<li><a href="a.html" class="menu_link">メニュー１</a></li>
		</ul>
	</nav>
</div>

$( function() {
	$( '.menu_title' ).click( function() {
		// '.menu_title' の次（next）の '.menu_sub' を開閉（slideToggle）
		$( this ).next( '.menu_sub' ).slideToggle( 200 );
	} ).click(); // クリックに挙動を与えた後 1回 実行しておく（畳む）
} );

【Create a new fiddle - JSFiddle】
https://jsfiddle.net/rpnhtb8n/1/

Comments

[hiro2016]

ありがとうございました！
できました！

Answer 2

想定する HTML も提示していただかないと回答が難しいのですが、たとえば次のような記述でよいのでしょうか。

<?php for ($cnt = 0; $cnt < 4; $cnt++) : ?>
<ul id="menu<?php echo $cnt;?>" class="menu">
  <li> ... </li>
  ...
</ul>
<?php endfor;  ?>

あと、クリックする要素のセレクタがクラスベースの $(".menu") なのに、slideToggle する要素が ID 指定のセレクタ $(#menu_sub") なのはおかしいと思います。おそらく、html の要素に id を振らなくてもよい実装方法があると思います。

ので、想定する HTML と期待する動きを詳しく教えてください。

Comments

[hiro2016]

さっそくのお返事ありがとうございます！

htmlも掲載いたしました。
また、説明文も追加いたしました。

javascriptは初心者でして、ネットの情報を修正して使っているので、ご指摘部分「html の要素に id を振らなくてもよい実装方法」を教えていただけますと助かります。

書いていただいたphpの部分は実装できているのですが、javascript内もそれに合わせてid名を変えていく必要があると思っています。
その変更方法がわからない状態です。

クリックすると下に出てくるドロップダウンリストを同じページに20個設置する予定なので、20個分のユニークなidが必要なのではと考えています。

よろしくお願いいたします。

[unau]

「html の要素に id を振らなくてもよい実装方法」については、kei344 さんが回答に書かれているようなものを想定していました。そちらをご覧ください。