dポイントプレゼントキャンペーン実施中！

【JS】phpで作成した多数のdivを操作したい

解決済

  • 質問者：chuntotto
  • 質問日時：
  • 回答数：3件

いつもお世話になっております。

divが縦に沢山ならび、リストとしています。
これは１つ１つ直接タグで書いているのではなく
元のHTMLには１つだけしか書いておらず、phpで複製して大量に配置しております。

それぞれの中に、ボタンと子divがあります。
ボタンを押すたびに、子divのスタイルを変えたいと思います。

そこで以下のコードで試してみました。
当たり前ですが、どのdivのボタンを押しても、１番上のdiv内の子divのスタイルが変わるだけです。
押されたボタンと、同じ親div内に居る子divに対してfanctionを適用させたいのです。

php側をいじらず、javascriptないしjQuery、html編集で解決できる方法はありますでしょうか…。

【html】

<body>

<div id="oyadiv" style="width:500px;border:1px solid #555;padding:10px;">
<p>親divです。phpでたくさん書き出し、リストみたいなかたちにしています。</p>
<div id="kodiv" style="height:100px;border:1px solid #aaa;">子div</div>
<a href="#" onclick="testfanc(); return false;">ボタン</a>
</div>

</body>


------
上記body内の"oyadiv"を、phpで40～50ケほど繰り返し書き出しています。
元となるこのhtmlは、親div内にボタンと子divがある構造でさえあれば、変更できます。
内外に要素を追加することも可能です。
------

【javascript】
var click_i=0; //クリックする度に切り替えるための判定
function testfanc(){
if(click_i>0){
document.getElementById("kodiv").style.display="none";
click_i=0;
}else{
document.getElementById("kodiv").style.display="block";
click_i+=1;
}
}

お詳しい方、何卒ご教授下さい。

通報する

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

質問の本文を隠す

A 回答 (3件)

No.1ベストアンサー

  • 回答者： LancerVII
  • 回答日時：

こんにちは。



まず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の表示・非表示を繰り返します。
    • good
    • 0
    • 件
通報する
この回答へのお礼

皆様丁寧にご回答くださり、ありがとうございます！
とてもシンプルな方法で、理想の動きが実現できたので
LancerVIIさんをベストアンサーに選ばせていただきます。
実際の運用は、親子関係がもう一層重なっていたので

$(this).parent().parent().find('.divのクラス名').～処理～

という感じになりました。

thisとparentがキモのようなのですね。
findもいろいろなところで使えそうです。
本当に助かりました。ありがとうございました！

通報する
お礼日時：2013/04/09 16:40

No.2

  • 回答者： babu_baboo
  • 回答日時：

すべてのぜんかくくうはくは、かんかくくうはくもじに、おきかえしてください。


<!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>&gt; 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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます！
短時間にこんなに長いコードを書いてくださり、本当に感謝いたします。
ほかの方の質問でもbabu_babooさんの回答を拝見し、勉強させていただくことも多かったので
ご回答いただけてうれしいです。

そうですね！たしかに、リストならば元からdlで作ればよかったかもしれません・・・。
画像やレイアウトの事情でdivを選びましたが（使い慣れているという理由で）、リストもいろいろと応用がきくのですね。
JS初心者なのですが
>document.addEventListener
こんなASみたいな書き方もできるのですね。勉強になります。

通報する
お礼日時：2013/04/09 16:44

No.3

  • 回答者： fujillin
  • 回答日時：

すでに答えが出ていますが…



なさりたいことを正確に把握できていないので少し違うかもしれませんが、例えばボタンをクリックした時の処理を『自分の兄弟要素で直前にある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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます！
>自分の兄弟要素で直前にあるdivの表示をトグル制御する
こんな処理ができるのですね…！甘く見ていました。JSで何でもできそうですね。
idは言われて気づきました。そうでした…手では１回しか書かないので、うっかりしておりました。感謝です！

>※直前のdivは、一応class="ko"であることのチェックもしています。
わざわざそんな処理まで…
まさか即日、この短時間でここまで書いていただけるとは思いませんでした。ご丁寧にありがとうございます！
まだまだ初心者で、コードの意味を解するには少し時間がかかりそうです…。
書いてくださったコードは印刷して、少しずつ読み解いていこうとおもいます。
ありがとうございました！

通報する
お礼日時：2013/04/09 16:56

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報