jQuery

【jQuery】クラスの追加・削除を交互に繰り返すtoggleClassの使い方

本記事では、クラスの追加・削除を交互に繰り返すtoggleClassメソッドの使い方について解説しています。

jQueryの学習におすすめ参考書
jQuery最高の教科書

本書情報
著者株式会社シフトブレイン
発売日2013/11/26
ページ数320ページ
Kindle版
レビュー
(Amazon)
(93件)

参考書が苦手な人はUdemyの動画がおすすめ
即実践 手を動かして6時間でjQueryをマスターしよう。
知識、経験ゼロからjQueryを使いこなそう

動画情報
作成者村守 康
学習時間6時間
受講者数28,547人
レビュー (425件)
動画の詳細はこちら

toggleClassとは

jQueryで同じクラスの追加・削除の処理はよく実装します。この処理を実装する場合、以下のように処理を実装していないでしょうか?

if ($("要素").hasClass("クラス名")) {
  $("要素").removeClass("クラス名");
} else {
  $("要素").addClass("クラス名");
}

たまに見かけるコードですね。if文でhasClassメソッドを使って特定のクラスが付与されているかチェックを行い、付与されている時はremoveClassメソッドで削除し、付与されていない時はaddClassメソッドで追加します。

この条件分岐やら複数のメソッドを使わずに、同じ処理を1行で実装できるのがtoggleClassメソッドです。

toggleClassの使い方

toggleClassメソッドの使い方は以下のとおりです。

$("要素").toggleClass("クラス名");
toggleClassの使い方

  • 要素:クラスの追加・削除をする対象の要素
  • クラス名:追加・削除したいクラス名

toggleClassメソッドの仕組みは、処理を実行するタイミングで対象要素に引数で設定したクラス名が存在しているかを確認し、存在していない場合は追加し、存在している場合は削除します。

サンプルコード

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
        background: skyblue;
        opacity: 0;
        transition: opacity 0.3s;
      }
      .content.view {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="content">コンテンツ</div>
    <button id="toggle-btn">表示・非表示の切り替え</button>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <script src="index.js"></script>
  </body>
</html>
$(function () {
  $("#toggle-btn").on("click", function () {
    $(".content").toggleClass("view");
  });
});
ページ読み込み時の表示
ページ読み込み時の表示

ページ読み込み時の表示を確認すると、.contentの要素が表示されていません。その理由は、opacity:0を設定し要素を透明にしているためです。

toggleClassメソッド実行時の表示
toggleClassメソッド実行時の表示

ボタンをクリックすると、toggleClassメソッドが実行され.contentの要素にviewクラスが付与されているかを確認します。1回目はviewクラスが付与されていないので、viewクラスが追加され要素が表示されます。

ボタンを再度クリックした時の表示
ボタンを再度クリックした時の表示

2回目をクリックすると、先ほどと同様にtoggleClassメソッドが実行され.contentの要素にviewクラスが付与されているかを確認します。1回目のクリックで.contentの要素にviewクラスが付与されたので、今回はviewクラスが削除されます。すると、ページ読み込み時と同様に要素が表示されない状態になります。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村