【jQuery】jQueryでクラス操作(追加・除去)を行う方法




前回はjQueryを利用してCSSを動的に(クリックやホバーなどをトリガーにして)変化させる方法を解説しました。

【jQuery】jQueryでCSSを操作する方法

2019年9月10日

しかし、例えば同じCSSをアプリケーション内のさまざまな場所で使う場合は、クラスに対するCSSを1箇所に書いて、CSSを適応させる場所にクラスをつけたほうが、メンテナンス性が上がりやすく修正が容易にできるようになります。

そのため、実際の現場ではjQueryによってCSSをそのまま書き換えるか、クラスを経由してCSSを適応させるかを使い分けることが重要になってきます。そこで、この記事ではjQueryによってクラスを追加・除去する方法を解説していきます。

addClass/removeClassメソッド

See the Pen
ZEzrPvj
by Keita (@tfpiyfit)
on CodePen.


イベントが発火したときに、新しくクラスを付与するにはaddClass(“クラス名”)メソッドを利用します。

まず上記のコードについて解説します。javascriptを見てください。発火条件は$(‘target-button’)がhoverされたとき、つまりtarget-buttonクラスの要素(今回はボタン)がマウスでホバーされたときです。

そして処理の内容は$(‘target-text’)に対してaddClass()をする、つまりtarget-textクラスに対してクラスを付与するという操作を表しています。今回はhoveredクラスを付与するというものです。ここでCSSを見てください。

CSSでhoveredクラスに対してフォントサイズ・フォントの太さ・色を指定しています。そのため、hoverされたときだけCSSのhoveredで指定したスタイルがテキストに適応されます。

逆にjavascriptの4行目・5行目にあるように、hoverを外れたときはhoverdクラスが除去されています。この特定のクラスを除去するメソッドがremoveClass(“クラス名”)になります。

これがメリットになる場合

例えば、もともと存在しているクラスを動的に付け足したい場合に大きな効力を発揮します。

上の例のように、もともとhogehogeに対してあるスタイルを適応していたところに加え、サンプル4に対しても動的にスタイルを適応したい場合を考えます。

これをjQueryのCSSで適応させようとすると

と何段も重ねて書かなければいけません。CSSの内容を変えるときも、変える箇所が増えていきしかも分散するのでメンテナンス性が非常に悪くなります。一方で、Classを付与するという方式だと

の1文だけですみます。スタイルの内容を変えるときも、hogehogeクラスに対するCSS部分を変えるだけですみます。このように、jQueryでCSSを直接いじるか、Classを経由するかだけでも、だいぶプログラムのクオリティが変わってくるのです。