jQueryでボタンをクリックしたのに、文字色や背景色が変わらない。「addClassは書いたはずなのに、何が足りないのだろう？」と迷うことがありますよね。
addClass()は、選択したHTML要素へクラスを追加するメソッドです。ただし、クラスを追加するだけでは見た目は変わりません。追加するクラス名に対応したCSSも用意すると、クリック後のデザインを切り替えられます。
この記事では、jQuery 4.0.0を使い、変更前の状態からクリックでクラスを追加するところまで順番に解説します。複数クラスの追加、タブ切り替え、効かない場合の確認方法も扱うため、初めてでもそのまま試せます。
jQueryのaddClassとは
addClass()は、jQueryで取得した要素のclass属性へ、指定したクラス名を追加します。すでに付いているクラスは消さず、後ろへ新しいクラスを足すのがポイントです。
上の図では、クリック前のカードには装飾用のクラスがありません。クリック後にクラスが追加されると、そのクラスへ用意したCSSが適用され、背景や枠線が変わります。
addClass自体が色やサイズを変更するわけではありません。「JavaScriptでクラスを追加し、見た目はCSSで指定する」と役割を分けて理解すると分かりやすいです。
addClassの基本構文
基本構文は次のとおりです。セレクタで対象の要素を選び、addClass()の丸括弧内へ追加したいクラス名を書きます。
$('セレクタ').addClass('クラス名');たとえば、notice-cardクラスが付いた要素へis-highlightedクラスを追加する場合は、次のように書きます。
$('.notice-card').addClass('is-highlighted');セレクタ側の.notice-cardには、クラスを表すピリオドが必要です。一方、addClass('is-highlighted')の引数にはピリオドを付けません。ここは初心者が間違えやすい箇所です。
クリックでクラスを追加する手順
ボタンをクリックすると、お知らせカードの背景と枠線が変わる例を作ります。まずはクラスを追加する前の表示を確認してください。
作成するファイルはindex.html、style.css、script.jsの3つです。同じフォルダへ保存すると、次のコードをそのまま試せます。
HTMLでカードとボタンを作る
index.htmlへ、お知らせカードとボタンを書きます。jQueryは公式CDNから読み込み、その後ろで自分のscript.jsを読み込んでください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>addClassの練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="notice-card">
<h1 class="notice-card__title">更新のお知らせ</h1>
<p>新しい記事を公開しました。</p>
<button class="notice-card__button" type="button">
強調表示を追加
</button>
<p class="notice-card__status" aria-live="polite">
まだクラスは追加されていません。
</p>
</div>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>jQueryを先に、自分のJavaScriptを後に置く順番が重要です。順番が逆になると、$ is not definedというエラーが出てaddClassを実行できません。
CSSで追加後の見た目を用意する
style.cssには通常時のカードと、is-highlightedクラスが付いた後のデザインを書きます。
.notice-card {
max-width: 720px;
padding: 24px;
border: 2px solid #d9e2ef;
border-radius: 16px;
background: #fff;
transition: 0.25s ease;
}
.notice-card__title {
margin-top: 0;
}
.notice-card__button {
padding: 12px 20px;
border: 0;
border-radius: 10px;
color: #fff;
background: #2368d8;
cursor: pointer;
}
.notice-card.is-highlighted {
border-color: #f3a712;
background: #fff8e7;
box-shadow: 0 12px 26px rgb(218 137 0 / 18%);
}
.notice-card.is-highlighted .notice-card__title {
color: #9a5200;
}.notice-card.is-highlightedのようにクラス名を空白なしで続けると、「2つのクラスを両方持つ同じ要素」を指定できます。このCSSは、addClassが実行されるまで適用されません。
JavaScriptでクリックイベントを書く
script.jsでは、ボタンのクリックイベント内でaddClassを実行します。続けて状態を表す文章も書き換えます。
$('.notice-card__button').on('click', function () {
$('.notice-card').addClass('is-highlighted');
$('.notice-card__status').text('is-highlightedクラスが追加されました。');
});.on('click', function () { ... })は、ボタンがクリックされたときに波括弧内の処理を実行する書き方です。ボタンを押すと、カードのclass属性へis-highlightedが追加されます。
カードの背景、枠線、見出しの色が変わりました。同じボタンをもう一度押しても、同じクラスが重複して増えることはありません。
複数のクラスをまとめて追加する
addClassでは、半角スペースで区切ると複数のクラスを一度に追加できます。次の例では、完了状態を表すis-completeと影を付けるhas-shadowを追加しています。
$('.profile-card__button').on('click', function () {
$('.profile-card').addClass('is-complete has-shadow');
});'is-complete has-shadow'は1つの文字列ですが、半角スペースで2つのクラス名に分かれています。カンマ区切りや全角スペースでは正しく追加できないため注意してください。
addClassを使ってタブを切り替える
実際の制作では、addClassとremoveClassを組み合わせて「現在選ばれている要素」を切り替えることがあります。代表例がタブメニューです。
クリックされたタブへis-activeを追加し、それ以外からは同じクラスを削除します。パネルも同じ順番で切り替えます。
<div class="tab-list" role="tablist" aria-label="学習内容">
<button class="tab-button is-active" type="button" role="tab" aria-selected="true">基本</button>
<button class="tab-button" type="button" role="tab" aria-selected="false">使い方</button>
<button class="tab-button" type="button" role="tab" aria-selected="false">対処法</button>
</div>
<div class="tab-panel is-active">addClassの基本を説明します。</div>
<div class="tab-panel">クリックイベントで使います。</div>
<div class="tab-panel">効かない原因を確認します。</div>.tab-button.is-active {
color: #fff;
background: #2368d8;
}
.tab-panel {
display: none;
padding: 24px;
background: #f8fbff;
}
.tab-panel.is-active {
display: block;
}$('.tab-button').on('click', function () {
const index = $('.tab-button').index(this);
$('.tab-button').removeClass('is-active').attr('aria-selected', 'false');
$(this).addClass('is-active').attr('aria-selected', 'true');
$('.tab-panel').removeClass('is-active');
$('.tab-panel').eq(index).addClass('is-active');
});最初にすべてのタブからis-activeを削除し、クリックされたタブだけへ追加しています。aria-selectedも合わせて更新すると、支援技術へ選択状態を伝えやすくなります。
addClassが効かないときの確認方法
コードを書いてもクラスが追加されない場合は、次の順番で確認すると原因を見つけやすくなります。
jQueryをscript.jsより先に読み込む
jQueryの読み込み前に$()を実行すると、ブラウザは$を理解できません。HTMLの末尾で、jQuery本体、script.jsの順に読み込んでください。
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="script.js"></script>セレクタとクラス名を区別する
対象を選ぶセレクタにはピリオドを付け、追加するクラス名には付けません。また、HTML側のクラス名と大文字・小文字、ハイフンまで一致しているか確認しましょう。
// 正しい書き方
$('.notice-card').addClass('is-highlighted');
// よくある間違い：引数にピリオドを付けている
$('.notice-card').addClass('.is-highlighted');下の行は.is-highlightedというピリオドを含む別のクラス名を渡すため、CSSの.is-highlightedとは一致せず、意図した結果になりません。
追加するクラスのCSSを用意する
開発者ツールでclass属性が増えているのに見た目が変わらない場合は、JavaScriptではなくCSSを確認します。クラスのCSSがない、別のCSSに上書きされている、CSSファイル自体を読み込めていない、といった原因が考えられます。
WordPressでは$をそのまま使えない場合がある
WordPressに同梱されているjQueryは、ほかのライブラリとの衝突を避けるためnoConflictモードで動きます。テーマやプラグイン内で$が未定義になる場合は、次の形で囲みます。
jQuery(function ($) {
$('.notice-card__button').on('click', function () {
$('.notice-card').addClass('is-highlighted');
});
});クラスを削除・切り替え・確認するメソッド
addClassと一緒に使われるメソッドも覚えておくと、メニューやタブの実装が楽になります。
| メソッド | 役割 |
|---|---|
removeClass() | 指定したクラスを削除する |
toggleClass() | クラスがなければ追加し、あれば削除する |
hasClass() | 指定したクラスを持っているか確認する |
$('.notice-card').removeClass('is-highlighted');
$('.notice-card').toggleClass('is-highlighted');
if ($('.notice-card').hasClass('is-highlighted')) {
console.log('強調表示されています');
}1回だけ追加するならaddClass、同じ操作で付け外しするならtoggleClassが向いています。目的に合わせて選びましょう。
jQueryを使わない場合はclassList.addを使う
新しく作る小規模なページでは、jQueryを読み込まずにJavaScript標準のclassList.add()を使う方法もあります。既存サイトがjQueryを使っている場合はaddClass、新規制作で依存を増やしたくない場合はclassListを検討できます。
document.querySelector('.notice-card')
.classList.add('is-highlighted');まとめ
- addClassは、選択した要素へクラスを追加するメソッド
- 見た目を変えるには、追加するクラスに対応したCSSも必要
- 複数のクラスは半角スペースで区切って追加できる
- 効かない場合は、読み込み順、セレクタ、クラス名、CSSを確認する
- 削除にはremoveClass、付け外しにはtoggleClassを使う
まずはクリック例を3つのファイルへコピーし、ブラウザの開発者ツールでclass属性が増える様子を確認してみてください。JavaScriptとCSSの役割が分かれると、タブやメニューにも応用しやすくなります。