jQueryによるJavaScript入門、第8回はclick時の$関数の第2引数を解説します。

$関数について解説を始めると非常に長く複雑になるので本講座では小出しにしていきます。

click時の$関数の第2引数とはどういうものかというと以下のサンプルをご覧ください。

$(function(){
	$("dt").click(function(){
		$("+dd",this).slideToggle("normal");
	})
})

サンプル

$(”+dd”,this)以外は今まで解説した記述です。

dt要素がクリックされた際に$(”+dd”,this)の表示非表示が切り替わるという命令です。

click(function(){から})に包まれたthisがなにかというとクリックされた要素になります。

$(”CSSセレクタ”,this)はクリックされたdt要素からのCSSセレクタで命令を記述することが出来ます。

$(”+dd”,this)はCSSセレクタで記述すると

dt(クリックされた) +dd

という意味になります。

+ddはなじみがないかもしれませんが、直後にある要素という意味のCSSセレクタです。

つまりサンプルはクリックされたdtの直後にあるdd要素の表示を切り替えているわけです。

クリックされた位置からのCSSセレクタが利用できると非常に便利で

サンプル

このサンプルは最初のサンプルのdtとddをコピーして増やしたものですjQuerｙのコードは一行も変更していません。

今回は少し難しいかったかもしれませんが、いますぐ理解できなくても今後もthisが登場しますのでコードを見比べならがら覚えて言っていただけたらと思います。

【PR】書籍 現場のプロから学ぶXHTML+CSS 好評発売中