jQuery API の callbacks.add( callbacks ) は、コールバックオブジェクトにコールバック関数を追加するメソッド。
複数のコールバック関数を追加することもできる。
記述方法
1つのコールバック関数を追加
callbacks . add( コールバック関数 )
複数のコールバック関数を追加
callbacks . add( コールバック関数1, コールバック関数2, コールバック関数3 )
カンマ区切りで、複数のコールバック関数を追加できる。
引数
戻り値
- Callbacks Object
コールバックオブジェクト。
記述例
1つのコールバック関数を追加
無名関数
var callbacksObject = jQuery . Callbacks();
callbacksObject.add( function( value ) {
// コールバック関数内の処理文
} );
callbacksObject.add( function( value ) {
// コールバック関数内の処理文
} );
ユーザー定義関数
function fnName( value ) {
// コールバック関数内の処理文
}
var callbacksObject = jQuery . Callbacks();
callbacksObject.add( fnName );
// コールバック関数内の処理文
}
var callbacksObject = jQuery . Callbacks();
callbacksObject.add( fnName );
複数のコールバック関数を追加
無名関数
var callbacksObject = jQuery . Callbacks();
callbacksObject.add(
function( value ) {
// コールバック関数内の処理文
},
function( value ) {
// コールバック関数内の処理文
}
);
callbacksObject.add(
function( value ) {
// コールバック関数内の処理文
},
function( value ) {
// コールバック関数内の処理文
}
);
ユーザー定義関数
function fnA( value ) {
// コールバック関数内の処理文
}
function fnB( value ) {
// コールバック関数内の処理文
}
var callbacksObject = jQuery . Callbacks();
callbacksObject.add( fnA, fnB );
// コールバック関数内の処理文
}
function fnB( value ) {
// コールバック関数内の処理文
}
var callbacksObject = jQuery . Callbacks();
callbacksObject.add( fnA, fnB );
実装例(サンプル)
実装例(サンプル)の動作について
- 「ボタン」をクリックすると、ボタンの右横に「こんにちは」と表示する。
- 「ボタン」を再度クリックすると、ボタンの右横のテキストを消す。
実装例(サンプル)のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
var $callbacksObject = jQuery.Callbacks();
$callbacksObject.add( function( value ) {
jQuery( '#sampleOutput' ).text( value );
} );
var $count = 1;
jQuery( "#sampleButton" ).on( "click", function() {
if( $count == 1 ){
$callbacksObject.fire( 'こんにちは' );
$count = 2;
}else{
$callbacksObject.fire( '' );
$count = 1;
}
} );
} );
// -->
</script>
<!--
jQuery( function() {
var $callbacksObject = jQuery.Callbacks();
$callbacksObject.add( function( value ) {
jQuery( '#sampleOutput' ).text( value );
} );
var $count = 1;
jQuery( "#sampleButton" ).on( "click", function() {
if( $count == 1 ){
$callbacksObject.fire( 'こんにちは' );
$count = 2;
}else{
$callbacksObject.fire( '' );
$count = 1;
}
} );
} );
// -->
</script>
HTML
<button id="sampleButton">ボタン</button>
<span id="sampleOutput"></span>
<span id="sampleOutput"></span>