JavaScriptでボタンのオン・オフを切り替える

 39,081 total views,  6 views today

JavaScript（jQuery）を使って、ボタンのオン・オフが切り替えられるようになった。

ボタンのオン・オフ切り替えのデモ



上のボタンが「表示ON」の時に押すと、この下の中央に文字が出て、「表示OFF」の時に押すと、文字が消える。ついでにボタンの文字の色も変わる。


2.ソース

ソースコードも表示してみることにした。

スポンサーリンク

JavaScript（jQuery）

jQuery('#click').on('click', "#hyouji", function() {
    if (this.value === "表示ON") {
        jQuery('input').addClass("clicked");
        jQuery('#hyouji').replaceWith('<input type="button" id="hyouji" value="表示OFF" style="font-size: 1.2em;color: #D30E1B;">');
        jQuery('#target').replaceWith('<div id="target">表示ON</div>');
    } else {
        jQuery('input').removeClass('clicked');
        jQuery('#hyouji').replaceWith('<input type="button" id="hyouji" value="表示ON" style="font-size: 1.2em;color: #028760;">');
        jQuery('#target').replaceWith('<div id="target"></div>');
    }
});

CSS

#target {
    text-align: center;
    font-size: 2em;
    color: #028760;
    font-weight: bold;
}
#btn_center {
    text-align: center;
}

HTML

<div id="click">
<div id="btn_center"><input type="button" id="hyouji" value="表示ON" style="font-size: 1.2em;color: #028760;position: center;"></div>
<p>上のボタンが「表示ON」の時に押すと、この下の中央に文字が出て、「表示OFF」の時に押すと、文字が消える。ついでにボタンの文字の色も変わる。</p>
<div id="target"></div>
</div>

まとめ

  • JavaScriptを使って、ボタンを押すたびに表示を切り替えられるようになった。
  • JavaScriptを使って、クリックされたボタン自身の表示を動的に変えられるようになった。
  • WordPressでソースコードを表示するプラグインを導入した。