jQueryでボタンのテキストを切り替える！開閉メニューやアコーディオンの実装例
2024-04-02
jQueryでボタンのテキストを変更する方法
text() メソッドは、要素内のテキストを取得または設定するために使用されます。 ボタンのテキストを変更するには、以下のように text() メソッドに新しいテキストを渡します。
// ボタンのテキストを取得
const currentText = $('button').text();
// ボタンのテキストを変更
$('button').text('新しいテキスト');
// ボタンのテキストを取得
const currentText = $('button').html();
// ボタンのテキストを変更
$('button').html('<b>新しいテキスト</b>');
// ボタンのテキストを取得
const currentText = $('button').attr('value');
// ボタンのテキストを変更
$('button').attr('value', '新しいテキスト');
イベントハンドラを使う
ボタンのテキストを動的に変更するには、イベントハンドラを使用することができます。 例えば、ボタンをクリックした時にテキストを変更するには、以下のように click() イベントハンドラを使用します。
$('button').click(function() {
// ボタンのテキストを変更
$(this).text('新しいテキスト');
});
例
以下の例では、text() メソッドを使ってボタンのテキストを変更しています。
<button>元のテキスト</button>
$('button').text('新しいテキスト');
このコードを実行すると、ボタンのテキストが "新しいテキスト" に変更されます。
jQueryを使ってボタンのテキストを変更するには、いくつかの方法があります。 上記の例を参考に、自分に合った方法を選択してください。
補足
- 上記の例では、ボタンのテキストを変更していますが、他の要素のテキストも同様に変更することができます。
- jQueryには、他にも様々なメソッドがあります。 詳細については、jQueryの公式ドキュメントを参照してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryでボタンのテキストを変更する</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>ボタンのテキストを変更</h1>
<p>以下のボタンをクリックして、テキストの変更を確認してください。</p>
<button id="button1">元のテキスト</button>
<button id="button2">元のテキスト</button>
<button id="button3">元のテキスト</button>
<script>
// 1. text() メソッドを使う
$('#button1').click(function() {
$(this).text('新しいテキスト');
});
// 2. html() メソッドを使う
$('#button2').click(function() {
$(this).html('<b>新しいテキスト</b>');
});
// 3. attr() メソッドを使う
$('#button3').click(function() {
$(this).attr('value', '新しいテキスト');
});
</script>
</body>
</html>
このコードを実行すると、以下のようになります。
上記以外にも、jQueryを使ってボタンのテキストを変更する方法はいくつかあります。 詳細については、以下の参考資料を参照してください。
jQueryでボタンのテキストを変更する他の方法
// ボタンのテキストを取得
const currentText = $('button').val();
// ボタンのテキストを変更
$('button').val('新しいテキスト');
// ボタンのテキストを取得
const currentText = $('button').data('text');
// ボタンのテキストを変更
$('button').data('text', '新しいテキスト');
// ボタンのテキストを取得
const currentText = $('button').prop('textContent');
// ボタンのテキストを変更
$('button').prop('textContent', '新しいテキスト');
// ボタンのテキストを取得
const currentText = $('button').text();
// ボタンのテキストを変更
$('button').replaceWith('<button>新しいテキスト</button>');
jquery jquery-ui
