Schalten Sie einen Text mit jQuery um
-
Verwenden Sie die
.text()-Methode, um den Text mit jQuery umzuschalten - Erweitern Sie jQuery mit einer benutzerdefinierten Funktion, um den Text umzuschalten
Um einen Text mit jQuery umzuschalten, können Sie die Methode .text() verwenden oder die jQuery-Bibliothek mit einer benutzerdefinierten Funktion erweitern, die den Text umschaltet. In diesem Artikel erfahren Sie anhand von Codebeispielen, wie Sie beide Methoden verwenden.
Verwenden Sie die .text()-Methode, um den Text mit jQuery umzuschalten
Die jQuery-Methode .text() kann den Textinhalt eines ausgewählten Elements verändern. Mit diesem Wissen können Sie eine bedingte Anweisung aufstellen, die den Text basierend auf seinem Inhalt austauscht.
Sie können auch einen ternären Operator verwenden, um die Dinge einfach und in einer einzigen Zeile zu halten. Nun folgt im Folgenden ein Anchor-Tag mit dem Text Reveal Answer.
Wenn Sie auf diesen Text klicken, wird ein Click-Event ausgelöst, das Reveal Answer in Hypertext Markup Language ändert. Ein zweiter Klick setzt den Text wieder auf Antwort anzeigen.
<!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>
Ausgang:
Erweitern Sie jQuery mit einer benutzerdefinierten Funktion, um den Text umzuschalten
Sie können eine benutzerdefinierte Funktion schreiben, die die jQuery-Bibliothek erweitert. Diese Funktion benötigt zwei Argumente; Der erste ist der Anfangstext des Elements und der zweite der Text, zu dem Sie wechseln möchten.
Wie im ersten Beispiel verwenden Sie einen ternären Operator, um den Code sauber und in einer Zeile zu halten. Jetzt finden Sie im HTML eine HTML-Schaltfläche mit einem Text; Wenn Sie darauf klicken, ändert es sich in einen anderen Text.
<!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>
Ausgang:
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