[js] jqueryでtoggleClassを使ってクラスの付け替えをやってみた

皆様は、toggleClassをご存知ですか？toggleClassを使用することで、つけたいクラスがあった場合は、そのクラスが消去され、クラスがなかった場合は付与されるといった動作をしてくれます。クリックイベント時に、addClassとremoveClassを使って別々のクラスをつけるといったものでは対応できませんが、つけたり消したりする動作をするには非常に便利です。
今回はそんなtoggleClassの使い方をご紹介したいと思います。

htmlと付け替え用のクラスを用意します

今回はクリックイベント時にtoggleClassを使ってクラスを切り替えたいと思います。
ボタンがクリックされたかどうかのサンプルを作ってみましょう。
ボタンがクリックされた時は、borderと文字と背景の色が変わるようにしてみましょう。

上記のように　白地のものがクリック前、黒字のものがクリック後のものになるようにします。コードは次のようなものを使用しています。

<style>
 .toggleclass_btn_sample{
   border:1px solid #000;
   padding-left:1em;
   padding-right:1em;
   padding-top:0.5em;
   padding-bottom:0.5em;
    display:inline-block;
 }
 .toggleclass_btn_sample.clickhere{
   border:1px solid red;
   background:#000;
   color:#fff;
 }
</style>
<div class="toggleclass_btn_sample">Click Here</div>
<div class="toggleclass_btn_sample clickhere">Click Here</div>

上記のようにclickhereクラスを切り替えることでこちらのボタンのデザインを切り替えることができます。

jqueryのtoggleClassを使ってクラスを切り替えてみよう

htmlとcssが用意できましたので、実際にクリックイベント時にクラスをtoggleClassを使って切り替えていきたいと思います。

<script>
 $(function(){
   $('.toggleclass_btn_sample').on('click',function(){
      $(this).toggleClass('clickhere');
  });
 });
</script>

toggleClassのサンプル実装例

クリックするとボタンのデザインが変化します。

上記のようにtoggleClassでクラスのON　OFFが実装できましたね。
こういうcssを切り替えてデザインを変えたり動きを変えたりするのに非常に便利ですので、ぜひ使ってみてくださいね。

まとめ

今回は、toggleClassの使い方についてご紹介させていただきました。このように２つのパターンがあってそれを切り替えるという動作には非常に向いていますので、ぜひ参考にして作ってみてください。このtoggleClassを上手に使いこなすとハンバーガーボタンなどを作ることができるようになります。