東京都府中市、渋谷区のWEB制作会社Maromaroのブログです

2017.01.16

miura

脱jQuery初心者!コピペに頼らないプログラミング入門講座~その2 クラスの追加と削除~

こんにちは。三浦です。
2017年になりました。酉年です。
前回の酉年に起こった出来事というと和泉元彌がプロレスデビューした年だそうです。
空中元彌チョップ…忘れられないですね。

さて、前回に引き続きjQuery初心者の方がちょっとしたコードの記述ができるようになるためのアレコレを紹介していこうと思います。

対象としている人は、
「jQueryのプラグインは利用しているけど自分では書けない」
「HTML、CSSでコーディングはできるけどjQueryも使えるようになりたい」
そんな方です。

↓前回の講座はこちらから

前回はjQueryで記述を行っていく際の基本的な考え方と簡単なクリックイベントについてご紹介しましたが、今回はjQueryでclassを追加、削除する方法についてご紹介していきます。

classの追加

addClassというメソッドを利用するとセレクターで指定した要素に任意のclassを付与することが出来ます。前回の講座でいう「なにをする…」の部分ですね。
書き方はこんな感じです。

("セレクター").addClass("付与したいクラス名");

ちょっとやってみます。
下記サンプルは「猫でなくす」ボタンを押すと猫がおじさんに変わります。
これは、猫の画像が入っているdivにclass=”nekodenai”を追加することでCSSのbackground-imageで設定しているCSSを上書きするような仕組みになっています。
(CSSの記述はあらかじめ用意しておきます)

  • RESULT
  • HTML
  • CSS
  • JS
  • 吾輩は…

    猫でなくす

  • コピー
    
    <div id="sample01" class="txt_center">
    <p class="neko_txt">吾輩は…</p>
    <div class="wagahai"></div>
    <p class="btn">猫でなくす</p>
    </div>
    
  • コピー
    
    #sample01 .wagahai {
    background: url(/wp-content/uploads/170116_img01.png) no-repeat;
    width:250px;
    height:325px;
    margin: 0 auto 20px;
    }
    #sample01 .wagahai.nekodenai {
    background:url(/wp-content/uploads/170116_img02.png) no-repeat;
    }
    #sample01 .btn{
      background-color: #000066;
      border:1px solid #999999;
      border-radius: 2px;
      color: #fff;
      display: block;
      font-size: 14px;
      padding: 14px;
      text-align: center;
      text-decoration: none;
      transition: 0.2s ease-in-out;
      -o-transition: 0.2s ease-in-out;
      -moz-transition: 0.2s ease-in-out;
      -webkit-transition: 0.2s ease-in-out;
      width: 160px;
      cursor: pointer;
      margin: 0 auto;
    }
    #sample01 .btn:hover{
      background:#6666A3;
    }
    
  • コピー
    
    $(function(){
      $("#sample01 .btn").on("click",function(){
          $("#sample01 .wagahai").addClass('nekodenai');
      });
    });
    

classの削除

removeClassというメソッドを利用するとセレクターで指定した要素に付与されているclassを削除することができます。
書き方はこんな感じです。

("セレクター").removeClass("削除したいクラス名");

では先ほどのサンプルを利用して実際にやってみます。
下記サンプルは「猫にする」ボタンを押すとおじさんが猫に戻ります。
これは、おじさんの画像が入っているdivからclass=”nekodenai”を削除することでCSSのbackground-imageで上書きしていたおじさんの画像を表示するCSSを効かないようにする処理になっています。

ちなみにremoveClassは括弧内のクラス名を指定しないと、付与されているすべてのclassを削除します。結構使うので覚えておいて損はないと思います。

("セレクター").removeClass();

それではremoveClassを使ってみましょう。

  • RESULT
  • HTML
  • CSS
  • JS
  • 吾輩は…

    猫にする

  • コピー
    
    <div id="sample02" class="txt_center">
    <p class="neko_txt">吾輩は…</p>
    <div class="wagahai nekodenai"></div>
    <p class="btn">猫にする</p>
    </div>
    
  • コピー
    
    #sample02 .wagahai {
    background: url(/wp-content/uploads/170116_img01.png) no-repeat;
    width:250px;
    height:325px;
    margin: 0 auto 20px;
    }
    #sample02 .wagahai.nekodenai {
    background:url(/wp-content/uploads/170116_img02.png) no-repeat;
    }
    #sample02 .btn{
      background-color: #000066;
      border:1px solid #999999;
      border-radius: 2px;
      color: #fff;
      display: block;
      font-size: 14px;
      padding: 14px;
      text-align: center;
      text-decoration: none;
      transition: 0.2s ease-in-out;
      -o-transition: 0.2s ease-in-out;
      -moz-transition: 0.2s ease-in-out;
      -webkit-transition: 0.2s ease-in-out;
      width: 160px;
      cursor: pointer;
      margin: 0 auto;
    }
    #sample02 .btn:hover{
      background:#6666A3;
    }
    
  • コピー
    
    $(function(){
      $("#sample02 .btn").on("click",function(){
          $("#sample02 .wagahai").removeClass('nekodenai');
      });
    });
    

応用編、addClassとremoveClassを両方使ってみよう

下記サンプルは「猫でなくす」ボタンを押すと猫がおじさんに変わり、「猫にする」ボタンを押すとおじさんから猫に戻す処理になっています。

  • RESULT
  • HTML
  • CSS
  • JS
  • 吾輩は…

    猫でなくす

    猫にする

  • コピー
    
    <div id="sample03" class="txt_center">
    <p class="neko_txt">吾輩は…</p>
    <div class="wagahai"></div>
    <div class="btn_box">
    <div class="clearfix">
    <p class="btn01">猫でなくす</p>
    <p class="btn02">猫にする</p>
    </p></div>
    </p></div>
    </div>
    
  • コピー
    
    #sample03 .wagahai {
    background: url(/wp-content/uploads/170116_img01.png) no-repeat;
    width:250px;
    height:325px;
    margin: 0 auto 20px;
    }
    #sample03 .wagahai.nekodenai {
    background:url(/wp-content/uploads/170116_img02.png) no-repeat;
    }
    #sample03 .btn_box{
    width:400px;
    margin: 0 auto;
    }
    #sample03 .btn01,
    #sample03 .btn02{
      background-color: #000066;
      border:1px solid #999999;
      border-radius: 2px;
      color: #fff;
      display: block;
      font-size: 14px;
      padding: 14px;
      text-align: center;
      text-decoration: none;
      transition: 0.2s ease-in-out;
      -o-transition: 0.2s ease-in-out;
      -moz-transition: 0.2s ease-in-out;
      -webkit-transition: 0.2s ease-in-out;
      width: 160px;
      cursor: pointer;
      margin: 0 auto;
    }
    #sample03 .btn01{
      float:left;
    }
    #sample03 .btn02{
      float:right;
    }
    #sample03 .btn:hover{
      background:#6666A3;
    }
    
  • コピー
    
    $(function(){
      $("#sample03 .btn01").on("click",function(){
          $("#sample03 .wagahai").addClass('nekodenai');
      });
      $("#sample03 .btn02").on("click",function(){
          $("#sample03 .wagahai").removeClass('nekodenai');
      });
    });
    

今回のまとめ

addClass
要素に任意のclassを付与できるメソッド。

removeClass
要素に付与されているclassから任意のものを削除できるメソッド。
また、要素に付与されているclass全てを削除することもできる。

前回と今回の講座でクリックイベント、クラスの付与、削除ができるようになりました。

次回はif文による条件分岐を紹介したいと思います。