- ベストアンサー
クリックする度に表示/非表示が切り替わるスクリプト
- クリックするとContent1の表示/非表示が切り替わるスクリプトを組みたい
- javascript内で要素の表示/非表示を切り替える方法がわからない
- StyleのVisibilityを使用して要素を表示/非表示にすることができる
- humi_ak
- お礼率84% (11/13)
- JavaScript
- 回答数7
- ありがとう数8
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
#3です。 うっかりフラグなんてつくっちゃったけど、不要でしたね。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> div { width:150px; float:left; } hr { clear:left; } </style> </head> <body> <div id="cont1">Content1</div> <div id="cont2">Content2</div> <hr> <div id="scon1">SubContents1</div> <div id="scon2">SubContents2</div> <script type="text/javascript"> <!-- (function() { function toggleSet(id1, id2) { var el = document.getElementById(id1); try { el.addEventListener('click', toggle(id2), false); } catch(e) { el.attachEvent('onclick', toggle(id2) ); } } function toggle(id2) { return function() { var s = document.getElementById(id2).style; s.visibility = s.visibility=='hidden'?'visible':'hidden'; } } toggleSet('cont1', 'scon1'); toggleSet('cont2', 'scon2'); })(); //--> </script> </body> </html> 以下は関係ありません。 ---------------------------------------------- 回答は簡単なほうがいいと思っています。（＝質問者がわかりやすい） まぁ、あまり簡潔にすぎると、まったく理解されない場合もあるけど… document.getElementById('cont1').onclick = function() { var s = document.getElementById('scon1').style; s.display = s.display=='none'?'block':'none'; } ですんでしまうものが、長く複雑に… それに匿名関数ではないほうが、わかりやすいかも。 ということで、なるべく努力はしますし、まとまりのある機能を一般化したようなものの場合はしているつもり。 でも、ごく簡単なものや考え方のみの場合は必要ないように感じています。（自分のお勉強とは別にして） なので、いつもというわけにはいかないかも。
その他の回答 (6)
- babu_baboo
- ベストアンサー率51% (268/525)
＞f&&func.call(that,flag);ってなにしてるの!? if( f == true ) { func( flag );// 引数funcが関数ならば、実行する } //と、似たり寄ったり。 //thatは、コールバックを利用したい時のため var flag = true; if( flag == true ) { test(); } は、 flag && test(); とも書けるよ if( flag != true ) { test(); } なら flag || test(); とも書けるよ ほそくがないことを、だしにしてつっぱしってしまった。もうしわけない
お礼
わざわざ解説ありがとうございます。 そう、その書き方も今回babu_babooさんのコードを見て知りました(@_@;) やはり質問する側にも最低限の知識は必要ですね・・・orz babu_babooさんのコードは難しいですが、調べて理解できるとタメになるのでありがたいです(^_^) そういえば先ほどのコード、 var f = 'function' === typeof func; f && func.call( that, flag ); この２つの謎が解けたらなんとか理解できました。 たった8行に半日使ってしまった・・・笑 大変勉強になりました！ ありがとうございますm(_ _)m
- babu_baboo
- ベストアンサー率51% (268/525)
fujillinさんへ。ぷちおねがい。 がっつりコードをかいてくださってありがとうございます。 とてもよいしげきになります。 もしよければ、onloadとかonclickとかではなく、ちがうものにしませんか？ それらは、かんたんにうわがきされると、きのうしなくなる。 へなちょこなコードしかかけませんが、じょうぶなコード、へんこうにつよいやつを おたがいにせっさたくまして、かきませんか？ あぁ～これだけだと、さくじょたいしょうだな。 なので、ほそく。 var cont_pop0 = toggleSwitch( true, dispBlock( 'scon1' ) ); var cont_pop1 = toggleSwitch( false, dispBlock( 'scon2' ) ); のようにして、それぞれをよびだすとべつべつにきのうします。 ちょっと、はずいからさくじょでもいいや！
お礼
下に同じです・・・・m(_ _)m 話の途中で申し訳ないですが解決という事で閉めさせていただきます。 e.style.display = ( flag = !flag ) ? 'block': 'none'; の考え方、とても参考になりました。 今度質問する時はbabu_babooさんのソースが読めるように勉強していきたいと思います。 ありがとうございました。
- babu_baboo
- ベストアンサー率51% (268/525)
ならば、ねじってみました！ぼけつをほったかんがある？！ var toggleSwitch = function ( defState, func, that ) { defState = !!defState; var f = 'function' === typeof func; var result = function ( ) { var flag = defState; f && func.call( that, flag ); defState = !defState; return flag; }; return (result( defState ), result); }; var dispBlock = function ( id ) { var e = document.getElementById( id ); return e ? function ( flag ) { e.style.display = flag ? 'block': 'none'; }: false; }; var cont_pop = toggleSwitch( true, dispBlock( 'scon1' ) );
お礼
ちょっとレベル高くて私にはまだ早いようです(@_@;) var f='function'===typeof func;ってなんで"="が3連結？ f&&func.call(that,flag);ってなにしてるの!? と全ての行に対して言えてしまいそうなのでやめておきます・・・。 汎用性は無いにしても最初の方に出てきたコードが今の私には丁度良いようでした^^; スマートなソースを書くにはもっと努力が必要ですね(>_<) ありがとうございます。
- fujillin
- ベストアンサー率61% (1594/2576)
＞ぐろーばるへんすうのflagもいまいちだけど ちょいとひねってみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> body { background-color:#eeeeee; } div.content{ background-color:#ffcc66; width: 100px; height: 20px; } </style> <script type="text/javascript"> <!-- window.onload = function() { document.getElementById('cont1').onclick = (function() { var flg = true; return function() { document.getElementById('scon1').style.display = (flg=!flg)?'block':'none'; } })(); } //--> </script> </head> <body> <div id="cont1" class="content">Content1</div> ↓これを表示/非表示させたい <div class="subcontent" id="scon1"> SubContents </div> </body> </html>
お礼
読み慣れない記述の解読に難航しております(>_<) window.onload=(function(){...})();の部分がいまいちピンときません。 onload=の先、function()を囲んでいる()はeval()と同等という記述を見つけたのですが 文字列ではないfunction(){・・・}を()しないと動かないのは何故でしょうか？ あと、その後に再び()を付けるのもよくわかりません・・・。
- babu_baboo
- ベストアンサー率51% (268/525)
こういうのは？ var flag = true; function cont_pop( ) { var e = document.getElementById( 'scon1' ); e.style.display = ( flag = !flag ) ? 'block': 'none'; } でも、いか、いろいろ。 <body bgcolor=#EEEEEE> とか、 width: 100; height: 20; とか、 <span> が、いきなりとうじょう！（いんらいんようそが、いきなりは・・・） とか ぐろーばるへんすうのflagもいまいちだけどね^^;
お礼
ソースコードが素人丸出しなのはごめんなさい(汗 これから勉強していきますm(_ _)m >e.style.display = ( flag = !flag ) ? 'block': 'none'; 参考になります、というか答えですよね^^; 条件文がその形で省略できる事も知りませんでした・・・。 直感的なコードしか書けない私にはとてもスマートに見えます。 ありがとうございました。
- fujillin
- ベストアンサー率61% (1594/2576)
ぐぐってみれば、使い方の説明はたくさん見つかる http://javascriptist.net/ref/element.style.visibility.html http://www.nurs.or.jp/~sug/html/chap6/samp5.htm http://allabout.co.jp/internet/javascript/closeup/CU20010228/index.htm http://www.red.oit-net.jp/tatsuya/java/setumei2.htm
お礼
お礼遅れまして、すいません。 検索の仕方が下手だったんですね・・・。 styleとか部分的な情報は手に入ったのですが、 それらを繋ぎ合わせる知識が足りませんでしたm(_ _)m とても参考になるリンクありがとうございます。
お礼
レベルの低い私に合わせてくださってありがとうございます(>_<) この私も上のようなコードを作っていました(エラー出て悩んでましたけど^^;) 一般化すれば使いまわしも利きますし便利なんですけど、その分コードも複雑になりますよね。 でも今回のお二人の回答に載っていたコードを見てJavaScriptの書き方を割と理解できた気がします。 条件文の省略形然り、関数の使い方然り、勉強になりました。 大変感謝しています。 ありがとうございました。