[jQuery]関数に発火元の情報を渡す方法

.click()とかの内容を一元管理するときとかに使える。

どういうことか

クリック時の動作は「$(‘#***’).click(function(){xxx});」みたいな感じで書くわけだけど、この「xxx」のところを関数にしてしまえば使い回すことができるんで、画像とかのポップアップを複数仕込む際に個別に似たようなことを何個も書かずに済むよね、という話。

「○○をクリックしたら××を表示する」を実現するにはクリック元の情報を関数内に突っ込む必要があるんで、そのへんを理解しないといけない。

少しでも勉強してれば分かる範囲だけど、出来合い物ばかり触ってるから基礎がないから今更学んだ。

やる

<a>をクリックしたら連番に沿った<div>を操作する、って感じに。

<a class="btn" id="btn01">btn01</a>
<a class="btn" id="btn02">btn02</a>
<a class="btn" id="btn03">btn03</a>

<div id="popup01" style="display: none;">popup01</div>
<div id="popup02" style="display: none;">popup02</div>
<div id="popup03" style="display: none;">popup03</div>

jQueryです。

$(function(){
    //関数作成
    function popup(e){
        var target = $(e).attr('id').slice(-2);
        $('#popup'+target).show();
    }
    //発火
    $('.btn').click(function(){popup(this);});
});

こんな感じ。クリックした<a>のidから連番を引っこ抜いて、同数の<div>を表示するって内容。

関数名は「popup」。

関数側の2箇所の「e」は同じこと書いてたらいいので「e」じゃなくてもいいです。

.click()の方の「popup(this)」は関数にクリックした自身を持っていくためのthis。

要するに、thisを関数に投げて、受け取るときにthisのままだとだめだからeに書き換えて処理してる。

そんなかんじ。