スタッフのつぶやき

クリック 画像を表示/非表示 複数 jQuery →検索!

  • このエントリーをはてなブックマークに追加
クリック 画像を表示/非表示 複数  jQuery →検索!

こんにちは。

制作部の山口です。私は横に長い静岡出身なのですが、最寄りの新幹線の駅は静岡駅です。静岡駅には「ひかり」と「こだま」が止まります。「のぞみ」は止まりません。この「ひかり」静岡着のものは1時間に1本あるのですが、東京/品川からもう1本静岡に止まらないものも出ています。私はこの静岡着でない「ひかり」に2度乗ったことがあります。1度目は友人の結婚式の為帰省した時。(式に間に合わないかかも!と道ずれになった同郷の友人と大慌てでした。)もうそんな失敗はしない!とちゃんと検索してから乗車するのですが、(にも関わらず・・)先日2度目を行ってしまいました。虚しい気持ちで豊橋から40分掛けて戻りました。静岡県民あるある!ではないですよね・・。

 

話は変わりまして、先日お客様のサイト制作の中で、簡単なJQueryのソースを書くことに挑戦しましたのでご紹介します。

 

①まず、イベントを登録します。

<a href=”onclick=”btn_click(n); return false;” ><img src=”img/aaa.png” ></a>

・onclick=”btn_click(n); クリックされたら、関数 btn_click(n);(nは、実行する関数の数分の何番目かの数字を入れてください)

・aタグにonclickを付ける時、return false;を記入することで、返り値として falseを返し、href=”#”(ページのトップへのアンカーリンク)の機能は実行されず、onclickの機能のみ実行されます。

②次にクリックされたら表示/非表示したいものにid名を付けます。

<div id=”tab1″>

~表示したいもの~

</div>

③最後に関数 btn_click(n)の処理を記入します。

<script>
document.getElementById(“tab1″).style.visibility =”hidden”;

function btn_click(n){
var y1 = document.getElementById(“tab1”);

if(y1.style.visibility==”visible”){
// hiddenで非表示
y1.style.visibility =”hidden”;
}else{
// visibleで表示
y1.style.visibility =”visible”;
}
}
</script>

・最初に②で設定したid=”tab1″をvisibilityプロパティのhiddenで非表示にし、if文を使い、表示(visible)/非表示(hidden)を切り替えます。以上でできます!

これを見たらできました!!わかりやすかったです。

 

しかし、表示/非表示を複数切り替えたい時はどうするの????そうです!ここからが難しかったです。

ここからは、プログラマーの先輩に教えていただき、完成に持っていくことができました。

for文を使用し、複数繰り返せるようにしました。

<script>
$(document).ready( function(){
btn_click(1);
});

function btn_click($no){
for ($i = 1; $i < 7; $i++){
$(‘#tab’ + $i).css(‘display’,’none’);
if ($no == $i){
$(‘#tab’ + $i).fadeIn(2000);
}
}
}
</script>

【1】 関数 btn_click がクリック時に ’#tab’ + $i が非表示になります。この ’#tab’ + $i とは #tabにfor文(初期値 $i = 1; が 7まで $i < 7;  1つずつ $i++)で取っていったものが入り、#tab1~#tab7を差します。(7個表示/非表示したいものがあります)

ここで、JQuery用のcssメソッドを使用し非表示にしています。

【2】 次に、if文で ’#tab’ + $i を表示しています。$no == $i で、$no と$iが同じだった場合に処理を実行します。

関数 btn_click($no)と’#tab’ + $iの数字部分は同じ数字にすることで、$no番目がクリックした時に’#tab’ + $iが表示されるという仕組みです。

【3】 一番上に

$(document).ready(function(){
//何かしらの処理
});

を記述しHTML=DOMの読み込みが終わったらfunction()の中の処理(=なにかしらの処理)を実行します。

最初にbtn_click(1)が実行され、表示されている状態にします。

 

以上で、表示/非表示を複数切り替えることができます。

 

ちなみに、この処理を2か所で実行したい!って時、(これもつまずきました。)は、

①で付ける関数名、②で付けるid名を、それぞれbtn_click2(n)、tab2(n)※nは一緒

などにして、$noも$no2などにして、$i も$aなどにして呼び出せば実行されます。

 

今度こそ以上です。長文失礼いたしました。

私は、スクールにてJavaScriptとPHPを学びましたが、コピペだけだとどうしてもプログラムを解読できないので

こうして噛み砕いて読み解いています。簡単な動きから、ソースを書けるようになりたいですが、

まだまだ道のりは遠いです。頑張らないといけないなと思います。

もし、表示/非表示動きをつけたい!って時に是非参考にしてみてください。

 

 

 

  • このエントリーをはてなブックマークに追加

建築に特化したホームページで集客&受注へ

実績の99%が建築業界だからわかる、"受注の取れるWebサイト"づくりを行います。
1000サイト以上の制作実績と、豊富なサービス・運営サポートが御社をバックアップ。お気軽にお問い合わせください!

D-Gripシステム Webサイトへ