bonus new member

https://librolibre.net/

masterjp

masterjp

8 formas de utilizar los trucos de CSS de las clases de elementos

Suponiendo que tiene tres clases HTML, el elemento DOM solo debe tener una:

<div class="state-1"></div>
<div class="state-2"></div>
<div class="state-3"></div>

Ahora tu trabajo es rotarlos. Es decir, ver las clases del elemento HTML.Cuando ocurre un evento, si el elemento tiene state-1 Eso es todo, eliminar state-1 y añadir state-2. Si hay state-2 en él, eliminarlo y añadir state-3. en el último estado, elimínelo y luego vuelva a state-1.

如何循环浏览 HTML 元素上的类的示例。 这里有<button>una</button>grande<svg><button>Pase por las clases estado-1, estado-2 y estado-3, pasando de rojo a amarillo y luego a verde.</button>

Vale la pena señalar que estamos hablando de más de 3 clases. DOM tiene un .classList.toggle() una función o incluso una que toma una condición como segundo argumento, pero esto es especialmente útil en situaciones de activación/desactivación de dos clases, en lugar de pasar cíclicamente por las clases.

por qué Muchas razones. Cambiar el nombre de la clase le permite cambiar el estilo del DOM y la administración del estado, ya que esta es una piedra angular del desarrollo web moderno. Pero específicamente en mi caso quiero hacer una animación FLIP, donde cambio el diseño y disparo la animación entre diferentes estados.

ten cuidado Acerca de los cursos existentes! Vi algunas ideas cubiertas .classNameque no es amigable con otras clases que pueden estar en elementos DOM. Todas estas son opciones "seguras" para ciclar clases de esta manera.

Ya que esto es programación, hay mucho manera de hacer el trabajo. Vamos a presentar algunos de ellos - por diversión. Una generación Twittear sobre el problema, muchos de los cuales tienen decisiones de personas que participaron en esta discusión.

Expresión detallada if / else para pasar por la clase

Entonces, en primer lugar, pasé por la clase. Así es como funciona mi cerebro. Solo escribe instrucciones muy específicas sobre lo que quieres que suceda:

if (el.classList.contains("state-1")) {
  el.classList.remove("state-1");
  el.classList.add("state-2");
} else if (el.classList.contains("state-2")) {
  el.classList.remove("state-2");
  el.classList.add("state-3");
} else {
  el.classList.remove("state-3");
  el.classList.add("state-1");
}

No tengo nada en contra de la verbosidad aquí, porque tengo bastante claro lo que está sucediendo y es fácil volver a este código y "razón", como dicen. Puede pensar que la verbosidad es un problema; por supuesto, hay una manera de ver las clases con menos código. Pero el mayor problema es que no es muy escalable. No existe tal configuración (como cambiar fácilmente el nombre de una clase) o una manera fácil de agregar clases a un grupo o eliminarlas.

Al menos podemos usar constantes:

const STATE_1 = "state-1";
const STATE_2 = "state-2";
const STATE_3 = "state-3";

if (el.classList.contains(STATE_1)) {
  el.classList.remove(STATE_1);
  el.classList.add(STATE_2);
} else if (el.classList.contains(STATE_2)) {
  el.classList.remove(STATE_2);
  el.classList.add(STATE_3);
} else {
  el.classList.remove(STATE_3);
  el.classList.add(STATE_1);
}

Pero no es muy diferente o mejor.

RegEx cierra la clase anterior, aumenta el estado y luego agrega nuevamente

esta por Tab AtkinsComo conocemos la forma de la clase, state-N, podemos buscarlo, tomar el número, aumentarlo usando un pequeño ternario (pero no por encima del estado más alto) y agregar/eliminar clases como una forma de pasar por ellas:

const oldN = +/bstate-(d+)b/.exec(el.getAttribute('class'))[1];
const newN = oldN >= 3 ? 1 : oldN+1;
el.classList.remove(`state-${oldN}`);
el.classList.add(`state-${newN}`);

Encuentre el índice de clase, luego elimine / agregue

La técnica de pasar por una serie de cursos gira en torno a preestablecer una serie de cursos. Esto actúa como un bucle de configuración en toda la clase, lo que creo que es una forma inteligente. Una vez que lo tenga, puede encontrar las clases apropiadas para agregar y eliminar Christopher Kirk-Nielsen:

const classes = ["state-1", "state-2", "state-3"];
const activeIndex = classes.findIndex((c) => el.classList.contains(c));
const nextIndex = (activeIndex + 1) % classes.length;

el.classList.remove(classes[activeIndex]);
el.classList.add(classes[nextIndex]);

Christopher tiene una gran idea para acortar la técnica de adición/eliminación. era lo mismo...

el.classList.remove(classes[activeIndex]);
el.classList.add(classes[nextIndex]);

// Does the same thing.
el.classList.replace(classes[activeIndex], classes[nextIndex]);

Mayank tiene una idea similar Desplácese por las clases, encontrándolas en una matriz en lugar de usar classList.contains(), puede usar el contenido de la matriz para verificar la clase actual del elemento DOM.

const states = ["state-1", "state-2", "state-3"];
const current = [...el.classList].find(cls => states.includes(cls));
const next = states[(states.indexOf(current) + 1) % states.length];
el.classList.remove(current);
el.classList.add(next);

Esta es la idea más común. este es jay y Este es Mike Wagz Establece la función para moverse hacia adelante y hacia atrás.

Declaraciones de reemplazo en cascada

Hablando de que replace API, Chris Carroll tiene una idea brillante los combinas con or operador y confíe en el hecho de que devuelve verdadero/falso si funciona o no. ¡Así que haz los tres y uno de ellos funcionará!

 el.classList.replace("state-1", "state-2") ||
 el.classList.replace("state-2", "state-3") ||
 el.classList.replace("state-3", "state-1");

Llega Niccolo Ribaudo La misma conclusión.

Solo revisa los números de clase

Si ha configurado previamente un 1 En la parte delantera, puede pasar por los grados 1-3 y agregarlos o eliminarlos en función de eso. Timoteo Leverett Quien enumeró otra opción similar en el mismo tweet.

// Assumes a `let s = 1` upfront
el.classList.remove(`state-${s + 1}`);
s = (s + 1) % 3;
el.classList.add(`state-${s + 1}`);

usar data-* propiedad cambiada a

Los atributos de datos tienen las mismas capacidades de especificidad, por lo que no tengo ningún problema con eso. De hecho, pueden ser más claros sobre el manejo de condiciones, pero aún mejor, tienen una API especial que los hace fáciles de manipular. Munauvar Firoz tiene una idea Esto se reduce a una sola línea:

el.dataset.state = (+el.dataset.state % 3) + 1

máquina de estado de atributo de datos

Usted puede Confiando en David Culshid Máquina de estado listo:

const simpleMachine = {
  "1": "2",
  "2": "3",
  "3": "1"
};
el.dataset.state = simpleMachine[el.dataset.state];

Es casi seguro que querrá una característica

Date un poco de abstracción, ¿verdad? Muchas ideas están codificadas de esta manera, pero hasta ahora lo he movido para enfocarme en la idea misma. Aquí, dejaré la función dentro. por Andrea Jamaki que establece una función única para la clase de bucle con anticipación y luego la llama si es necesario:

const rotator = (classes) => ({ classList }) => {
  const current = classes.findIndex((cls) => classList.contains(cls));
  classList.remove(...classes);
  classList.add(classes[(current + 1) % classes.length]);
};

const rotate = rotator(["state-1", "state-2", "state-3"]);
rotate(el);

Escuché de Kyle Simpson, quien tiene la misma idea, casi todos la tienen.

¿otros?

tener más pensamientos sobre mi respuesta tuit originalsin embargo, por lo que puedo decir, lo que compartí anteriormente es diferente. Lo siento si me perdí el tuyo! Siéntase libre de compartir sus pensamientos nuevamente en los comentarios aquí. Veo que nadie lo ha usado switch Descargo de responsabilidad: ¡esta puede ser una oportunidad!

David Desandro incluso grabó un video, que es genial, ya que lentamente abstrae el concepto cada vez más hasta que se vuelve conciso, pero aún legible y más flexible:

Aquí hay una pluma de demostración con todo el código para cada ejemplo. Están numerados, así que para probar el otro, comente el no comentado y comente el otro ejemplo:

Artículo Recomendado:  Soporte para múltiples marcos en Monorepo

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir