並んでるボタンをクリック(あるいはマウスオーバー)したら、それに応じてメインの画像が切り替わるっていうのよくあるじゃない。
↓こういうやつ
ライブラリもたぶんいっぱいあるんだろうけど、
これくらいはサクっと自作しときたいよね、ってことで
ボタンのclassに番号をふっていって、画像のclassにも番号をふっていって、対応させる
みたいなことをやってたんです。
こんな風に
1つめのボタンをクリックしたとしたら
#btnの子にいるclass名「image1」を取得して来て、それに mainをくっつけて
「mainimage1」のついてる画像を表示する、
みたいな。
こういうめんどくさいこと、みんなもやってるね?
よね?
そういう方、jQueryのindex(this)とeq()を使えばもっと楽になるんだよ!
index(this)とは、そいつが何番目にいるやつなのかを数字で教えてくれるってやつ。
index()のリファレンスはこちら
ってやったとしたら、一番左のボタンをクリックしたときには、「0」って出るし、2番目のボタンをクリックしたときには「1」って出る。
※番号は0から始まるから、1番目が0だよね。
これを使えば、いちいちclass内に番号を仕込んでマッチングさせる必要なんてないんだ。
1番目のボタンをクリックしたら、1番目の画像を出す。
2番目のボタンをクリックしたら、2番目の画像を出す。
っていうのが簡単にできる。
改善したソースはこちら。
html側がずいぶんスッキリしたじゃないか。
jsは3行
①numにクリックしたliが何番目なのかその数字を入れるよ。
②#mainimageに並んでる大きい画像たちは全部いったん消す。
③numに入ってる数字と同じ番目にある画像を出す。
eq()の説明をしてなかったけど、そこはなんとなく察すればいいよ!
eq()のリファレンス
サドンデス!
↓こういうやつ
ライブラリもたぶんいっぱいあるんだろうけど、
これくらいはサクっと自作しときたいよね、ってことで
ボタンのclassに番号をふっていって、画像のclassにも番号をふっていって、対応させる
みたいなことをやってたんです。
こんな風に
<ul id="btn"><li class="image1"><img src="btn1.png"></li><li class="image2"><img src="btn2.png"></li><li class="image3"><img src="btn3.png"></li><li class="image4"><img src="btn4.png"></li><li class="image5"><img src="btn5.png"></li></ul><ul id="mainimage"><li class="mainimage1"><img src="mainimage1.png"></li><li class="mainimage2"><img src="mainimage2.png"></li><li class="mainimage3"><img src="mainimage3.png"></li><li class="mainimage4"><img src="mainimage4.png"></li><li class="mainimage5"><img src="mainimage5.png"></li></ul>$("#btn li").click(function(){var num = $(this).attr("class");$("#mainimage li").hide();$(".main"+num).show();});
1つめのボタンをクリックしたとしたら
#btnの子にいるclass名「image1」を取得して来て、それに mainをくっつけて
「mainimage1」のついてる画像を表示する、
みたいな。
こういうめんどくさいこと、みんなもやってるね?
よね?
そういう方、jQueryのindex(this)とeq()を使えばもっと楽になるんだよ!
index(this)とは、そいつが何番目にいるやつなのかを数字で教えてくれるってやつ。
index()のリファレンスはこちら
$("#btn li").click(function(){var num = $("#btn li").index(this);alert(num);});
ってやったとしたら、一番左のボタンをクリックしたときには、「0」って出るし、2番目のボタンをクリックしたときには「1」って出る。
※番号は0から始まるから、1番目が0だよね。
これを使えば、いちいちclass内に番号を仕込んでマッチングさせる必要なんてないんだ。
1番目のボタンをクリックしたら、1番目の画像を出す。
2番目のボタンをクリックしたら、2番目の画像を出す。
っていうのが簡単にできる。
改善したソースはこちら。
<ul id="btn"><li><img src="btn1.png"></li><li><img src="btn2.png"></li><li><img src="btn3.png"></li><li><img src="btn4.png"></li><li><img src="btn5.png"></li></ul><ul id="mainimage"><li><img src="mainimage1.png"></li><li><img src="mainimage2.png"></li><li><img src="mainimage3.png"></li><li><img src="mainimage4.png"></li><li><img src="mainimage5.png"></li></ul>$("#btn li").click(function(){var num = $("#btn li").index(this); //①$("#mainimage li").hide(); //②$("#mainimage li").eq(num).show(); //③});
html側がずいぶんスッキリしたじゃないか。
jsは3行
①numにクリックしたliが何番目なのかその数字を入れるよ。
②#mainimageに並んでる大きい画像たちは全部いったん消す。
③numに入ってる数字と同じ番目にある画像を出す。
eq()の説明をしてなかったけど、そこはなんとなく察すればいいよ!
eq()のリファレンス
サドンデス!