[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME>WEBプログラム覚書>jQueryによる表示、非表示切り替え
jQueryによる表示、非表示切り替え
今さらながらjQueryをお勉強。日本語のリファレンスも充分すぎるくらい充実してますんで、勉強しやすいですねよく使いそうなDivの表示、非表示切り替えをjQueryでやると・・・
jQueryによる表示、非表示サンプル
Javascript
- $(function(){
- // id="jQuerySample" 内のdivを非表示
- $("#jQuerySample").css("display", "none");
- // id="jQuerySample"内のi番目のh5がクリックされた時、
- // i番目のdivの表示、非表示切り替え
- $("#jQuerySample").each(function(i){
- $(this).click(function(){
- $("#jQuerySample").eq(i).toggle();
- });
- });
- });
HTML
- <div id="jQuerySample">
- <h5>jQueryサンプル1</h5>
- <div>
- <p>これはjQueryのサンプル1です。</p>
- </div>
- <h5>jQueryサンプル2</h5>
- <div>
- <p>これはjQueryのサンプル2です。</p>
- </div>
- <h5>jQueryサンプル3</h5>
- <div>
- <p>これはjQueryのサンプル3です。</p>
- </div>
- </div>
実行結果
jQueryサンプル1
これはjQueryのサンプル1です。
jQueryサンプル2
これはjQueryのサンプル2です。
jQueryサンプル3
これはjQueryのサンプル3です。
たったこれだけ。自分の場合jQuery使わないと下記のようにわけわからんことになってしまいました。もう吐きそうです。
jQueryを利用しない表示、非表示サンプル
Javascript
- onload = function() {
- obj = document.getElementById("jQuerySample");
- h5 = getEreaObj(obj,"h5");
- div = getEreaObj(obj, "div");
- for (i=0; i<h5.length; i++) {
- div[i].style.display = "none";
- showhide(h5[i], i);
- }
- }
- function getEreaObj(obj, tag){
- objs = obj.getElementsByTagName(tag);
- return objs;
- }
- function showhide(obj, num){
- myFunc = function(){
- if(div[num].style.display == "none"){
- div[num].style.display = "block";
- }else{
- div[num].style.display = "none";
- }
- }
- obj.onclick = myFunc;
- }
表示、非表示の切り替えでもこんな面倒です。さらにdivの中にdivが入ってる入れ子の状態の場合、 通常もっと厄介になりますが、jQuery利用すれば選択部分を変更するだけです。
jQueryを利用した子要素のみの表示、非表示サンプル
Javascript
- $(function(){
- // id="jQuerySample2" を親要素に持つdivを非表示
- $("#jQuerySample2 > div").css("display", "none");
- // id="jQuerySample2"を親要素に持つi番目のh5が
- // クリックされた時、i番目のdivの表示、非表示切り替え
- $("#jQuerySample2 > h5").each(function(i){
- $(this).click(function(){
- $("#jQuerySample2 > div").eq(i).toggle();
- });
- });
- });
HTML
- <div id="jQuerySample">
- <h5>jQueryサンプル1</h5>
- <div>
- <p>これはjQueryのサンプル1です。</p>
- <div>
- <p>これはjQueryのサンプル1の中のdiv内です。</p>
- </div>
- </div>
- <h5>jQueryサンプル2</h5>
- <div>
- <p>これはjQueryのサンプル2です。</p>
- </div>
- <h5>jQueryサンプル3</h5>
- <div>
- <p>これはjQueryのサンプル3です。</p>
- <div>
- <p>これはjQueryのサンプル3の中のdiv内です。</p>
- </div>
- </div>
- </div>
実行結果
jQueryサンプル1
これはjQueryのサンプル1です。
これはjQueryのサンプル1の中のdiv内です。
jQueryサンプル2
これはjQueryのサンプル2です。
jQueryサンプル3
これはjQueryのサンプル3です。
これはjQueryのサンプル3の中のdiv内です。
実際書き比べてみると便利さがよくわかります・・・
| 投稿日 | 2008年6月30日 20:28 |
|---|---|
| カテゴリ | JavaScript |
| タグ | jQuery | サンプルコード |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1131 |
マナ
2013年11月14日 10:59 | 返信
jQueryによる表示、非表示サンプル
のサンプルコードがおかしいと思います。
$("#jQuerySample").css("display", "none");
だと"jQuerySample"内がすべて消えてしまうため"jQuerySample div"ではないでしょうか？
その下の"jQuerySample"の記述も
”jQuerySample h5”になるのではないでしょうか？
勝手ながらソースを参照したところそうなっていました。