Si aprende alguna parte importante de la filosofía de la arquitectura front-end de esta serie, aprenda esta. Solo cambia de clases. En este screencast, comenzamos a bajar por un agujero de conejo importante de JavaScript solo para detenernos, atraparnos y usar CSS en su lugar. Cuando está cambiando algo visualmente, ese es el dominio de CSS. No solo es bueno en eso, por lo general tiene más rendimiento y mantiene una "separación de preocupaciones" saludable que lo convierte en un sitio web saludable a largo plazo.
Después de recuperar el sentido, simplemente terminamos intercambiando 1) el texto del botón 2) un data-stateatributo en el contenedor.
$(".bigger").on("click", function() ( var el = $(this); var module = el.parent(); // Swap expanded state module.attr("data-state") == "expanded" ? module.attr("data-state", "") : module.attr("data-state", "expanded"); // Swap button text. el.text() == el.data("text-swap") ? el.text(el.data("text-original")) : el.text(el.data("text-swap")); ));Aquí es donde terminamos:
Vea el Pen quFCo de Chris Coyier (@chriscoyier) en CodePen
Sí, este video (y el sentimiento) es “¡solo cambia de clase!”, Y estamos cambiando un atributo translate = "no"> data- * solo porque me gustan. Pienso en ellos como clases espaciadas por nombres o clases con valores. Podría decirse que son más útiles en CSS que las clases y tienen exactamente el mismo valor de especificidad.
Hace eso ? /: ¿la sintaxis se ve extraña? Si es así, eso se conoce como un operador ternario (o "condicional").
La primera línea es una prueba, la siguiente línea (o el bit después de?) Es lo que sucede si esa prueba es verdadera, la última línea (o el bit después de :) es lo que sucede si esa prueba es falsa. Quizás esto ayude:
// The boolean (true/false) test module.attr("data-state") == "expanded" // Do this if the test is true ? module.attr("data-state", "") // Do this is the test if false : module.attr("data-state", "expanded");No los evite solo porque se ven raros, pueden ser más eficientes (y en última instancia leer tan bien, siempre y cuando no se vuelva loco) como la lógica si / si no.
Doug Neiner tiene un buen artículo sobre la idea de "simplemente cambiar de clases". Las clases tienen mucho poder en CSS. Puedes ocultar / mostrar cosas, mover cosas, cambiar la apariencia de las cosas, activar animaciones… el cielo es el límite. Y cuanto más arriba en el "árbol" (DOM) aplique la clase, más poder en cascada tendrá. Un cambio de clase en el cuerpo significa que puede controlar cualquier cosa en toda la página con una sola clase. Y todo con una cantidad muy pequeña de JavaScript.
Una vez que compre esto, será un desarrollador más feliz.