二つ並んでいるボタンと DIV をクリックすると、それぞれが click イベントによって、ピンク色になります。
一番下のボタンは、それらの定義済みの click イベントを一行で全て呼び出しています。但し、その時に色コードを渡しているので、結果としてピンクでは無く濃い灰色に変化します。
※ この場合の一括用セレクタは "[id*=target]" です。
※ パラメータは配列で渡し、イベント側でその数ぶんの仮引数を定義します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// 拡張パラメータにより、単独か trigger か判断できます
$( "#target1" ).click( function( event, color ) {
console.log( $( this ).val() );
if ( color ) {
$(this).css("background-color", color );
}
else {
$(this).css("background-color", "#ffc0c0" );
}
});
// 拡張パラメータにより、単独か trigger か判断できます
$( "#target2" ).click( function( event, color ) {
console.log( $( this ).val() );
if ( color ) {
$(this).css("background-color", color );
}
else {
$(this).css("background-color", "#ffc0c0" );
}
});
$( "#div_target" )
.css({
width: "300px",
height: "30px",
border: "1px solid #000000",
"border-radius": "8px"
})
// 拡張パラメータにより、単独か trigger か判断できます
.click( function( event, color ) {
console.log( "クリックされました" );
if ( color ) {
$(this).css("background-color", color );
}
else {
$(this).css("background-color", "#ffc0c0" );
}
});
// **************************************************
// trigger で呼び出した場合は、拡張パラメータを使用
// するようにしているので単独でクリックした時と色が
// 違います
// **************************************************
$( "#all" ).click( function() {
// id に target の文字列を含む要素の click イベントを呼び出す
$( "[id*=target]" ).trigger("click", [ "#c0c0c0" ] );
});
});
</script>
<input type="button" id="target1" value="この文字を表示するボタン1">
<input type="button" id="target2" value="この文字を表示するボタン2">
<div id="div_target"></div>
<br>
<input
type="button"
id="all"
value="上のコンテンツの click イベントを呼び出すボタン">
jQuery ドキュメント : .trigger
|
|
【メソッド:jQueryの最新記事】
- jQuery の nextAll と prevAll で、テーブル行の任意のセルをクリックしてその行の全ての TD 内のデータを取得する
- jQuery で要素の作成や移動を行う、append、prepend、after、before で TABLE 要素内の行を扱うサンプル
- jQuery の .contents と .children の違い
- jQuery の .children で、直近の子要素のみを選択して処理する
- jQuery の .filter と .end で同じ集合に対して何度も色々な設定を行う
- jQuery で全て動的に PRE(親)要素の中にアンカー(リンク)を作成して行く処理 : $("<a></a>")
- JavaScript と jQuery : 位置関係から id の無い要素の参照を取得
- JavaScript DOMとjQuery : 同一階層(または下の階層)の要素を親経由で参照する
- jQuery の .val() と .val('値') と一括変更用の .val(関数)
- $.extend メソッドで jQuery の中に処理を書いて、その中で使ったデータをグローバルで使えるようにする
- jQuery のイベント名によるイベント登録の中身
- jQuery の each メソッドの『秘密の使い方』
- jQuery の .text('値') と .html() で HTMLエンティティに変換
- jQuery : animation メソッド
