jQueryを使ってボタンをクリックする度に要素のテキストを切り替える方法

jQueryを使って、ボタンをクリックする度に要素の中のテキストを切り替える方法をご紹介いたします。

例えば、「開く」と書かれたボタンをクリックすると、テキストを「閉じる」に切り替えたい時などに便利です。

jQueryを使ってボタンをクリックする度に要素のテキストを切り替える方法

まず、HTMLは以下のようにします。シンプルなボタン要素ですね。

<button class="btn">開く</button>

jQuery側では、以下のように記述します。スクリプトは</body>の直前に追加してあげればOKです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('.btn').on('click', function () {
  if ($(this).text() === '閉じる') {
    $(this).text('開く');
  } else {
    $(this).text('閉じる');
  }
});
</script>

.btnをクリックした時に、テキストが「閉じる」だったら「開く」へ、「開く」だったら「閉じる」へ変換しています。

CSSの疑似要素を使ってクリックの度にテキストを切り替える方法

ボタンのテキストをCSSの疑似要素にすることで、CSSを使ったテキストの切り替えも可能です。

その場合、HTMLは以下のようにします。

<button class="btn"></button>

続いて、CSSでは以下のように指定します。.openクラスが付いたら疑似要素の文字を「閉じる」に変更しています。

.btn::before {
  content: "開く";
}

.btn.open::before {
  content: "閉じる";
}

最後に、jQueryでクリックの度にクラスを追加・削除してあげます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('.btn').on('click', function () {
  $(this).toggleClass('open');
});
</script>

CSSを追加する代わりに、jQuery側はかなりシンプルになりますね。

あとがき

単純な動作ですが、ボタンクリックで開閉するアコーディオン等を実装する時に活用できると思います。

どちらのパターンも簡単に実装できますので、ぜひ参考にしていただけると幸いです。