jQueryを使い、クリックしたボタンの色に親要素の背景色を変更

ボタンをクリックすると、ボタンの親要素の背景色を、クリックしたボタンの色に変更する。

実装例

実装例(サンプル)の動作について

各ボタンをクリックすると、ボタンの親要素の背景色を、クリックしたボタンの色に変更する。

ソースコード

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 api

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>

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>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, , 逆引き パーマリンク