jQuery API の click( fn ) は、クリックイベントにイベントハンドラをバインドしたいときに便利なメソッドだ。
要素をクリックしたときに、click( fn ) の引数に指定したイベントハンドラを呼び出すことができる。
記述方法
jQuery( セレクター ) . click( イベンドハンドラ );
「セレクター」の要素のクリックイベントに、「イベンドハンドラ」をバインド。
実装例(サンプル)①
- リストアイテムA
- リストアイテムB
- リストアイテムC
実装例(サンプル)①の動作について
リストアイテムA、リストアイテムB、リストアイテムCを、クリックすると、クリックしたリストアイテムが、上へスライドしながら消える。
実装例(サンプル)①のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-click li' ) . click( function () {
jQuery( this ) . slideUp();
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-click li' ) . click( function () {
jQuery( this ) . slideUp();
} );
} );
// -->
</script>
HTML
<ol id="jquery-api-click">
<li>リストアイテムA</li>
<li>リストアイテムB</li>
<li>リストアイテムC</li>
</ol>
<li>リストアイテムA</li>
<li>リストアイテムB</li>
<li>リストアイテムC</li>
</ol>
実装例(サンプル)②
- リストアイテムA
- リストアイテムB
- リストアイテムC
実装例(サンプル)②の動作について
「表示/非表示」ボタンを、クリックすると、AからC、全てのリストアイテムが、上へスライドしながら消える。「表示/非表示」ボタンを、もう一度クリックすると、下へスライドしながら現れる。表示/非表示を交互に繰り返す。
実装例(サンプル)②のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-click-2' ) . click( function () {
jQuery( '#jquery-api-click-2-list' ) . slideToggle();
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-click-2' ) . click( function () {
jQuery( '#jquery-api-click-2-list' ) . slideToggle();
} );
} );
// -->
</script>
HTML
<p><button id="jquery-api-click-2">表示/非表示</button></p>
<ol id="jquery-api-click-2-list">
<li>リストアイテムA</li>
<li>リストアイテムB</li>
<li>リストアイテムC</li>
</ol>
<ol id="jquery-api-click-2-list">
<li>リストアイテムA</li>
<li>リストアイテムB</li>
<li>リストアイテムC</li>
</ol>