Alternar un texto con jQuery
-
Use el método
.text()para alternar el texto con jQuery - Extienda jQuery usando una función personalizada para alternar el texto
Para alternar un texto con jQuery, puede emplear el método .text() o ampliar la biblioteca jQuery con una función personalizada que alterna el texto. Este artículo le enseña cómo usar ambos métodos con ejemplos de código.
Use el método .text() para alternar el texto con jQuery
El método jQuery .text() puede alterar el contenido del texto de un elemento seleccionado. Con este conocimiento, puede configurar una declaración condicional que intercambiará el texto según su contenido.
También puede usar un operador ternario para mantener las cosas simples y en una sola línea. Ahora, a continuación, hay una etiqueta de anclaje con el texto Revelar respuesta.
Cuando haga clic en este texto, activará un evento de clic que cambiará Revelar respuesta a Lenguaje de marcado de hipertexto. Un segundo clic revertirá el texto a Revelar respuesta.
<!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>
Producción:
Extienda jQuery usando una función personalizada para alternar el texto
Puede escribir una función personalizada que amplíe la biblioteca jQuery. Esta función tomará dos argumentos; el primero será el texto inicial del elemento y el segundo es el texto al que desea cambiar.
Como en el primer ejemplo, utilizará un operador ternario para mantener el código ordenado y en una línea. Ahora, en el HTML, encontrarás un botón HTML con un texto; cuando haga clic en él, cambiará a otro texto.
<!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>
Producción:
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