狼読

 

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

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

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

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

Click Here
Click Here

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

<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のサンプル実装例

Click Here

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

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

まとめ

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

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/06/01

[jquery]テキストボックスが入力された時にどんな文字が入力されているのかを取得してみる

投稿カレンダー

2020年11月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

Technology

category

©狼読