jQuery でテキストを切り替える
Habdul Hazeez
2023年6月21日
jQuery でテキストを切り替えるには、.text() メソッドを使用するか、テキストを切り替えるカスタム関数で jQuery ライブラリを拡張します。 この記事では、コード例を使用して両方の方法を使用する方法について説明します。
.text() メソッドを使用して、jQuery でテキストを切り替えます
jQuery の .text() メソッドは、選択した要素のテキスト コンテンツを変更できます。 この知識があれば、内容に基づいてテキストを入れ替える条件ステートメントを設定できます。
三項演算子を使用して、物事をシンプルに 1 行にすることもできます。 さて、以下では、Reveal Answerというテキストを含むアンカータグがあります。
このテキストをクリックすると、クリック イベントが発生し、Reveal Answer が Hypertext Markup Language に変更されます。 もう一度クリックすると、テキストが Reveal Answer に戻ります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-toggle-text</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
p {
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<main>
<p>What is HTML? <a id="anchor-link" href="#">Reveal Answer</a></p>
</main>
<script>
$(document).ready(function() {
$("#anchor-link").click(function () {
let text = $("#anchor-link").text();
$("#anchor-link").text(
text == "Reveal Answer" ? "Hypertext Markup Language" : "Reveal Answer");
});
});
</script>
</body>
</html>
出力：
カスタム関数を使用して jQuery を拡張し、テキストを切り替えます
jQuery ライブラリを拡張するカスタム関数を作成できます。 この関数は 2つの引数を取ります。 1つ目は要素の初期テキストで、2つ目はスワップ先のテキストです。
最初の例と同様に、三項演算子を使用してコードを 1 行にまとめます。 HTML には、テキスト付きの HTML ボタンがあります。 クリックすると、別のテキストに変わります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-toggle-text</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
main {
width: 50%;
margin: 2em auto;
}
button {
font-size: 2em;
}
</style>
</head>
<body>
<main>
<button class="btn-to-change">Click to change me</button>
</main>
<script>
$(document).ready(function() {
$.fn.extend({
toggle_text: function (initial_text, alternate_text) {
return this.text(this.text() == alternate_text ? initial_text : alternate_text);
}
});
$(".btn-to-change").click(function() {
$(".btn-to-change").toggle_text("Click to change me", "Hello there!");
});
});
</script>
</body>
</html>
出力：
著者： Habdul Hazeez
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn