2017.01.16

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

Web制作

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

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

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

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

Maromaro Blog

脱jQuery初心者！コピペに頼らないプログラミング入門講座～その1～

こんにちは。三浦です。気が付けばもう１２月ですね。２０１６年も残り一か月です。皆さん年内にやり残したことはありませんか？「２０１６年はjQueryのコードを自前で書く勉強をはじめようと思っていたのに先延ばしにして結局手つかず」なんて方もいるんじゃないでしょうか。いますよね？きっといるはずです！それなら今から始めましょう！ということでこれから数回に渡ってjQuery初心者の方がちょっとしたコードの記述ができるようになるためのアレコレを紹介していこうと思います。対象としている人は、「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');
  });
});