tutorial style remove jade classlist javascript node.js express pug

javascript - style - pug js id



Jade condicional(if/else) para agregar clase a div en lĂ­nea (5)

Aunque es una vieja pregunta, creo que los siguientes trabajos desde Pug incluyen la detección de existencia de objetos incorporada:

div#demo.collapse(class=fromEdit? ''in'':undefined)

Si no es obvio, esto verifica si fromEdit existe y si entra como la clase, de lo contrario, deja la clase en blanco.

¿Hay alguna manera de hacer esto en línea en una plantilla de jade?

if(typeof fromEdit != ''undefined'') div#demo.collapse.in else div#demo.collapse

Me gustaría hacer esta comprobación condicional "en línea" y el resultado agregaría el .in al final del div si fromEdit existe.


Como se documenta en http://jade-lang.com/reference/attributes/ :

El atributo de clase [...] También puede ser un objeto asignar nombres de clase a valores verdaderos o falsos, lo que es útil para aplicar clases condicionales

la tarea también se puede hacer de la siguiente manera:

div#demo.collapse(class={ in: typeof fromEdit != ''undefined'' })

Aunque no funciona aquí here (creo que necesitan actualizar algo), pero funciona con [email protected].



Esto funciona:

div#demo.collapse(class=typeof fromEdit === "undefined" ? "" : "in")

Pruébelo here .


Si no desea que se agregue el atributo de clase cuando no hay ningún valor, puede asignarlo indefinido en lugar de una cadena vacía. Aquí está el ejemplo anterior, ligeramente modificado:

div#demo.collapse(class=typeof fromEdit === "undefined" ? undefined : "in")

Actualización: Además, si está utilizando pug , ahora puede agregar tantas declaraciones de class= como quiera con diferentes condiciones y se concatenarán en el atributo de clase resultante. p.ej:

#demo.collapse(class=cond1 && ''class1'' class=cond2 && ''class2'')