ボタンをクリックすると、ボタンの親要素の背景色を、クリックしたボタンの色に変更する。
実装例
実装例（サンプル）の動作について
各ボタンをクリックすると、ボタンの親要素の背景色を、クリックしたボタンの色に変更する。
ソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#sample' ) . on(
'click',
'button',
function ( $event ) {
var $eventDelegateTarget = jQuery( $event.delegateTarget );
jQuery( $eventDelegateTarget ).css( 'backgroundColor', jQuery( this ).text() );
}
);
jQuery( '#sample > button' ).each( function( $index, $element ) {
jQuery( $element ) . css( 'backgroundColor', jQuery( this ).text() );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#sample' ) . on(
'click',
'button',
function ( $event ) {
var $eventDelegateTarget = jQuery( $event.delegateTarget );
jQuery( $eventDelegateTarget ).css( 'backgroundColor', jQuery( this ).text() );
}
);
jQuery( '#sample > button' ).each( function( $index, $element ) {
jQuery( $element ) . css( 'backgroundColor', jQuery( this ).text() );
} );
} );
// -->
</script>
使用している主なjQuery api
- event . delegateTarget
- on( events, selector, fn )
- jQuery( 'parent > child' )
- each( function( index, Element ) )
- css( propertyName, value )
- jQuery( '#id' )
- jQuery( callback )
HTML
<div id="sample">
<button class="whiteFont">#000000</button>
<button>#ff0000</button>
<button>#ffff00</button>
<button>#ffffff</button>
<button>#00ffff</button>
<button class="whiteFont">#0000ff</button>
<button>#00ff00</button>
<button>#ff00ff</button>
</div>
<button class="whiteFont">#000000</button>
<button>#ff0000</button>
<button>#ffff00</button>
<button>#ffffff</button>
<button>#00ffff</button>
<button class="whiteFont">#0000ff</button>
<button>#00ff00</button>
<button>#ff00ff</button>
</div>
CSS
<style>
<!--
#sample {
margin: 10px;
padding: 10px;
width: 600px;
height: 100px;
border: solid 1px gray ;
border-radius: 10px;
background-color: white;
}
#sample button {
width: 70px;
}
.whiteFont {
color: white;
}
-->
</style>
<!--
#sample {
margin: 10px;
padding: 10px;
width: 600px;
height: 100px;
border: solid 1px gray ;
border-radius: 10px;
background-color: white;
}
#sample button {
width: 70px;
}
.whiteFont {
color: white;
}
-->
</style>