スタッフブログ
ちょっとしたギャラリーに。
2012.01.26【一色】
jQuery(ver.1.4以上)でよく使うインデックスの検索。
$(this).index()
使用例
$(function() {
$('#title li').mouseover(function() {
var num = $(this).index(); // ←コレ
$('#photo li').hide();
$('#photo li').eq(num).show();
});
});
たとえば、左にインデックス、右に写真をそれぞれ順番に並べたとき
タイトルのマウスオーバーに応じた写真の表示が可能です。
(初期表示は、cssで補完。)
タイトル1 写真1(非表示)
タイトル2 写真2(表示)
タイトル3 写真3(非表示)
タイトル4 写真4(非表示)
タイトル5 写真5(非表示)
※タイトル2にマウスオーバーで、写真2のみ表示。
直に計算式を書かなくてもよい、jQueryらしい作法です。
これから覚えようという方にとっつきやすい検索ではないでしょうか。
- WEBを使って愛媛から日本を元気にする アイムービック -
