Es una necesidad común en las aplicaciones web: hace clic en algo y el texto de la cosa en la que acaba de hacer clic cambia. Quizás algo simple como un botón “Mostrar” que cambia a “Ocultar” o “Expandir descripción” a “Contraer descripción”. Esto es algo bastante sencillo de hacer, pero hay que tener en cuenta varias consideraciones. Cubramos un montón de formas.
jQuery Way (menos marcado / más JavaScript)
Necesita almacenar el texto de “intercambio” en algún lugar. Yo diría que en la mayoría de los casos es una preocupación de diseño / vista, por lo que almacenarlo en el marcado es una buena idea. Usaremos el ejemplo de un botón cuyo texto cambia entre “Ocultar” y “Mostrar”. Un atributo data- * es un lugar perfecto para almacenar el texto de intercambio. Entonces eso se convierte en:
<button data-text-swap="Show">Hide</button>Es fácil cambiar el texto, como:
var button = $("button");
button.text(button.data("text-swap"));Pero, si hiciéramos eso, perderíamos el texto original para siempre. Primero debemos almacenar el texto original. Otro atributo data- * servirá.
var button = $("button");
button.data("text-original", button.text());
button.text(button.data("text-swap"));Para hacer eso en un evento de clic, haría lo siguiente:
var button = $("button");
button.on("click", function() {
button.data("text-original", button.text());
button.text(button.data("text-swap"));
});Pero eso solo va en una dirección. Para completar el “intercambio”, necesitaremos comparar el valor del texto actual del botón para ver si coincide con el texto de intercambio o no. Si es así, cámbielo de nuevo al original. Si no, al texto de intercambio. Así es como se ve todo hecho:
$("button").on("click", function() {
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));
} else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));
}
});jQuery Way (más marcado / menos JavaScript)
Si estamos dispuestos a configurar eso data-text-original valor en el marcado original, podemos simplificar un poco el JavaScript. Podemos usar un solo operador ternario para verificar si el intercambio coincide con el original y realizar la acción correcta en función de la veracidad.
$("button").on("click", function() {
var el = $(this);
el.text() == el.data("text-swap")
? el.text(el.data("text-original"))
: el.text(el.data("text-swap"));
});Vanilla JavaScript Way
Soy culpable de usar demasiado jQuery por aquí para cosas que se pueden hacer sin él. Así es como se vería la primera versión con “menos marcado” en JavaScript “sin formato”:
var button = document.querySelectorAll("button")[0];
button.addEventListener('click', function() {
if (button.getAttribute("data-text-swap") == button.innerHTML) {
button.innerHTML = button.getAttribute("data-text-original");
} else {
button.setAttribute("data-text-original", button.innerHTML);
button.innerHTML = button.getAttribute("data-text-swap");
}
}, false);CSS Way (con jQuery cambiando los nombres de las clases)
Dado que esto es una preocupación de vista y podría considerarse un “estado”, una idea popular es usar JavaScript solo para cambiar clases que representan estados y dejar que CSS defina cuál es realmente el cambio visual.
Podríamos usar la clase “on” para representar el estado de intercambio. Luego, esa clase aplicaría un pseudo elemento que cubra la palabra anterior y la reemplace con la palabra de intercambio. No creo que los elementos de botón reales con el estilo del navegador predeterminado se adapten bien al pseudoelemento, así que usemos un ancla aquí.
a {
position: relative;
}
a.on:after {
content: "Hide";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
}Esto es un poco raro, para ser justos. Creo que esto es casi peor que poner la palabra swap en JavaScript. CSS no está realmente diseñado para este tipo de cosas y probablemente tenga algunos problemas de accesibilidad.
Esto también funciona porque la palabra “Ocultar” es un poco más pequeña que “Mostrar”. Si la palabra de intercambio fuera más grande, el original sobresaliría debajo de la cubierta blanca. Es posible que pueda evitarlo bloqueando en línea el original, ocultando el desbordamiento y sacando el original de la caja con sangría de texto. Pero el hecho de que la palabra de reemplazo esté absolutamente posicionada la elimina del flujo, lo que podría ser un problema, sin mencionar que el diseño del mundo real no siempre es tan simple como un color plano sobre un color plano.
Modo solo CSS
Pero bueno, mientras nos pongamos de moda, podríamos usar The Checkbox Hack aquí para hacer que el texto intercambie completamente CSS. El reemplazo ocurre exactamente de la misma manera, solo sucede cuando una casilla de verificación invisible justo antes de la palabra es :checked O no. Esto significa que la palabra también debe estar en una etiqueta, que puede alternar el estado de esa casilla de verificación a través del atributo for.
<input id="example-checkbox" type="checkbox">
<label for="example" id="example">Show</label>#example {
position: relative;
}
#example-checkbox {
display: none;
}
#example-checkbox:checked + #example:after {
content: "Hide";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
}Demostración de las cinco formas
¿Más?
¿Cómo has hecho este tipo de cosas en el pasado? No cubrimos simplemente poner la palabra de intercambio directamente en el JavaScript … ¿cómo te sientes al respecto?