eyemovic inc.

Culture blog会社の活動・働き方

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を使って愛媛から日本を元気にする アイムービック –

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。