二つ並んでいるボタンと 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
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
