- ベストアンサー
【JS】phpで作成した多数のdivを操作したい
- phpで作成した多数のdivを操作する方法について教えてください。
- divを複製して配置しているので、どのdivのボタンを押しても同じ動作しかできません。
- phpをいじらずにjavascriptやjQuery、html編集で問題を解決する方法を教えてください。
- chuntotto
- お礼率71% (5/7)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 まずidは同じ名称を付けないのが決まりです。 <div style="width:500px;border:1px solid #555;padding:10px;"> <p>親divです。phpでたくさん書き出し、リストみたいなかたちにしています。</p> <div style="height:100px;border:1px solid #aaa;">子div</div> <a href="#">ボタン</a> </div> こう出力するとして、表示・非表示の切り替えで良いのであれば jQueryを利用すると <script type="text/javascript"> $().ready ( function() { $('body div').find('a').click ( function() { $(this).parent().find('div').toggle(); return false; }); }); </script> こうすれば「ボタン」というリンクをクリックする毎にその「ボタン」が属する子divの表示・非表示を繰り返します。
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
すでに答えが出ていますが… なさりたいことを正確に把握できていないので少し違うかもしれませんが、例えばボタンをクリックした時の処理を『自分の兄弟要素で直前にあるdivの表示をトグル制御する』とでもしてあげると、要素の位置関係だけで判別できるので、idやクラスによる識別に頼らなくてよくなります。 とはいえ、実際はボタン用のリンク要素とそうでないリンク要素が存在することでしょうから、それらを識別するためにリンク要素にクラスを設定しておくなどは必要かも知れません。（他の方法で識別することも考えられます） idが一意であることは、すでにNo1様がご指摘の通りです。 こんな方法もあるよという、一例までに。 ※ボタン用のリンクは、識別のためhrefを#switchとすることで区別しています。 ※直前のdivは、一応class="ko"であることのチェックもしています。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div.oya { width:500px;border: 1px solid #555; padding:10px; } div.ko { height:100px;border: 1px solid #aaa; } </style> <script type="text/javascript"> /*@cc_on@*/ document./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/'click', function(evt){ var elem = evt./*@if(1)srcElement@else@*/target/*@end@*/; var reg = /\#switch$/; if(elem.nodeName!="A" || !reg.test(elem.href)) return; reg = /(^| )ko( |$)/; do{ elem = elem.previousSibling; } while(elem && elem.nodeType!==1); if(elem && elem.nodeName==="DIV" && reg.test(elem.className)) elem.style.display = elem.style.display==="none"?"block":"none"; return false; }, false); </script> </head> <body> <div class="oya"><p>親div</p> <div class="ko">子div</div> <a href="#switch">ボタン</a> </div> <div class="oya"><p>親div</p> <div class="ko">子div</div> <a href="#switch">ボタン</a> </div> <p>複数の子を持つ場合</p> <div class="oya"><p>親div</p> <div class="ko">子div</div> <a href="#switch">ボタン</a> <div class="ko">子div</div> <a href="#switch">ボタン</a> <div class="ko">子div</div> <a href="#switch">ボタン</a> </div> <p>入れ子構造の場合</p> <div class="oya"><p>親div</p> <div class="ko">子div</div> <a href="#switch">ボタン</a> <div class="oya"><p>親div</p> <div class="ko">子div</div> <a href="#switch">ボタン</a> <div class="oya"><p>親div</p> <div class="ko">子div</div> <a href="#switch">ボタン</a> </div> </div> </div> </body> </html>
お礼
ご回答ありがとうございます！ >自分の兄弟要素で直前にあるdivの表示をトグル制御する こんな処理ができるのですね…！甘く見ていました。JSで何でもできそうですね。 idは言われて気づきました。そうでした…手では１回しか書かないので、うっかりしておりました。感謝です！ >※直前のdivは、一応class="ko"であることのチェックもしています。 わざわざそんな処理まで… まさか即日、この短時間でここまで書いていただけるとは思いませんでした。ご丁寧にありがとうございます！ まだまだ初心者で、コードの意味を解するには少し時間がかかりそうです…。 書いてくださったコードは印刷して、少しずつ読み解いていこうとおもいます。 ありがとうございました！
- babu_baboo
- ベストアンサー率51% (268/525)
すべてのぜんかくくうはくは、かんかくくうはくもじに、おきかえしてください。 <!DOCTYPE html> <title>子は親を見て育つ</title> <meta charset="UTF-8"/> <style> body { width : 40em; } div.hoge { border: 3px red double; } em { color:gray; } </style> <body> <h1>親のブロック構造を探して弄る</h1> <dl> <dt>> divが縦に沢山ならび、リストとしています。 <dd> <p>ならば、DIV要素を使わずリスト要素を使うべきです。<br> <em>CSS で、list-style: none; とするだけでよくね？</em> <dt>子要素からは、node.parentNode で親を特定できる <dd> <p>ボタンが子要素ならば、親をたどります。 <p>しかし、その親を特定する名前が必要です。<br> 今回は、className を利用してはどうでしょうか？ <p>className には、空白で複数指定できるのですから、 それをチェックするには、注意が必要です。 </dl> <h2>コピーするサンプル</h2> <div class="hoge"> <h3>これは、サンプルのDIV要素です</h2> <p> なんだよ！丁寧に回答しても、無視するやつ！ <input type="button" name="change" value="顔色を変える"> </div> <h2>実行手順</h2> <ol> <li>まず、実験的にスクリプトで div 要素を沢山つくります。 <input type="button" name="make" value="作る"> <li>それぞに出来た<input type="button" name="dmy" value="顔色を変える">を、 苛立ちをあらわにしてクリックします。 <li>動かないと思ったら、これは IE のことなど考慮しない仕様だからです。 <li>jQuery を持ち出すほどのことは、ありません。 </ol> <h2>イベントの実装</h2> <ul> <li>クリックイベントは、バブリングします。なので、document で監視します。 <li>呼び出されたハンドラの第１引数には、そのイベントオブジェクトが勝手に プレゼントされます。素直に受けとりましょう。 <li>event.target で、クリックした要素が判別できます。もしその、要素が ボタンなら名前を見て、次に何をすべきか教え込みます。 <li>もし、親の className が、 "hoge" だったら、望んでいた行為におよびます。<br> 今回は、背景をランダムに色を変えます。 </ul> <h2>実行結果</h2> <div id="view"></div> <script> function make () { var origin = document.querySelector ('div.hoge'); var view = document.querySelector ('#view'); for (var i = 500; i--; ) view.appendChild (origin.cloneNode (true)); } function r (n) { return Math.floor (Math.random () * n); } function color (e) { e.style.background = 'rgb(' + r(256) + ',' + r(256) + ',' + r(256) + ')'; } function change (e) { var isHoge = /(^|\s+)hoge(\s+|$)/; var prt = e; while (prt = prt.parentNode) if (prt.className) if (isHoge.test (prt.className)) return color (prt); } function handler (event) { var e = event.target; if ('INPUT' === e.tagName) if ('button' === e.type) switch (e.name) { case 'make' : make (); break; case 'change' : change (e); break; case 'dmy' : alert ('これじゃないから');break; } } document.addEventListener ('click', handler, false); </script>
お礼
ご回答ありがとうございます！ 短時間にこんなに長いコードを書いてくださり、本当に感謝いたします。 ほかの方の質問でもbabu_babooさんの回答を拝見し、勉強させていただくことも多かったので ご回答いただけてうれしいです。 そうですね！たしかに、リストならば元からdlで作ればよかったかもしれません・・・。 画像やレイアウトの事情でdivを選びましたが（使い慣れているという理由で）、リストもいろいろと応用がきくのですね。 JS初心者なのですが >document.addEventListener こんなASみたいな書き方もできるのですね。勉強になります。
お礼
皆様丁寧にご回答くださり、ありがとうございます！ とてもシンプルな方法で、理想の動きが実現できたので LancerVIIさんをベストアンサーに選ばせていただきます。 実際の運用は、親子関係がもう一層重なっていたので $(this).parent().parent().find('.divのクラス名').～処理～ という感じになりました。 thisとparentがキモのようなのですね。 findもいろいろなところで使えそうです。 本当に助かりました。ありがとうございました！