jQuery クリックテキスト切り替え

jQuery クリックテキスト切り替え：基本から応用、サンプルコード付き解説

この記事では、jQueryを使ってボタンクリックでテキストを切り替える方法を、基本から応用までサンプルコード付きで解説します。初心者の方でも分かりやすいように、コードの解説に加えて、実際に動作を確認できるデモも用意しています。

1. jQueryでテキスト切り替えの基本

`text()` メソッドを使うと、要素内のテキスト内容を取得または変更できます。これを利用して、ボタンクリックでテキストを切り替えることができます。

`text()` メソッドを使ったテキスト切り替え

<button id="change-text-btn">テキスト切り替え</button>
<p id="target-text">初期テキスト</p>

<script>
$(document).ready(function() {
  $("#change-text-btn").click(function() {
    $("#target-text").text("変更後のテキスト");
  });
});
</script>

サンプルコードと解説

HTML: ボタン要素と、テキストを表示するp要素を用意します。
JavaScript:
- $(document).ready(function() { ... }); で、ページの読み込みが完了したタイミングで処理を実行します。
- $("#change-text-btn").click(function() { ... }); で、ボタンがクリックされた時の処理を定義します。
- $("#target-text").text("変更後のテキスト"); で、p要素のテキストを変更後のテキストに置き換えます。

動作デモ

初期テキスト

2. HTML要素の表示・非表示で切り替え

3. フェードイン・フェードアウトで滑らかに切り替え

4. 複数のテキストを切り替える

5. CSSクラスの追加・削除で切り替え

6. 応用：アコーディオンメニューの実装

この記事を読めば、jQueryを使って様々なテキスト切り替えを実装できるようになります。ぜひ、参考にしてみてください。

参考文献

jQuery API Documentation

この記事に関するQ&A

質問	回答
Q. `text()` メソッド以外に、テキスト content を操作するメソッドはありますか？	A. はい、`html()` メソッドを使うことで、HTML タグを含むテキスト content を操作することができます。
Q. クリックイベント以外に、テキストを切り替えるトリガーはありますか？	A. はい、マウスオーバーなどのイベントをトリガーにすることも可能です。`hover()` メソッドなどを利用します。
Q. アコーディオンメニューを、クリックではなくホバーで開閉するにはどうすれば良いですか？	A. `click()` メソッドの代わりに `hover()` メソッドを使用することで実現できます。

その他の参考記事:jquery toggle text

jQuery クリック テキスト 切り替え：基本から応用、サンプルコード付き解説

目次