Ocultar / mostrar elemento con un booleano

109

Tiendo a tener muchos de estos en mi código

if(shouldElementBeVisible)
    $element.show()
else
    $element.hide()

¿Hay alguna forma más elegante de empaquetar con javascript, jquery o guión bajo? Idealmente, quiero algo que se parezca a esto

$element.showOrHideDependingOn(shouldElementBeVisible)
javascript jquery underscore.js visibility Aakil Fernandes
fuente
jQuery mostrar u ocultar
George
@SpencerWieczorek esa pregunta hace referencia toggle, pero es una pregunta diferente
Aakil Fernandes

Respuestas:

166

Aparentemente, puede pasar un booleano a la togglefunción

$element.toggle(shouldElementBeVisible)
Aakil Fernandes
fuente
34
Recomiendo usarlo $element.toggle(!!shouldElementBeVisible)para evitar golpear accidentalmente una de las otras "sobrecargas" , a menos que, por supuesto, esté muy seguro de que la variable es un valor booleano.
Jeroen
7
Podría ser una mejor opción $element.toggle(shouldElementBeVisible == true).
jox
"0"y "false"se tratan de manera muy diferente a como falselo hacen de todos modos, por lo que no creo que la distinción realmente importe, incluso 0sería incorrecta si desea que se oculte, ya que todos esos tiempos de animación establecidos pero aún así cambian la visibilidad.
Tasgall
19

¡Sí hay!

$element.toggle();

Sin ningún parámetro, togglesimplemente alterna la visibilidad de los elementos (no me refiero a la visibilitypropiedad) y depende del estado actual del elemento.

$element.toggle(display);

Si llama togglecon un parámetro booleano, el elemento se muestra si es truey hiddensi esfalse

fuente

Zach Spencer
fuente
2
Estaba a punto de marcar esto incorrectamente, luego me di cuenta de que la última referencia de API te permite establecer un booleano en lugar de un objeto de opciones.
Aakil Fernandes
algunas líneas debajo de eso: "Sin parámetros, el método .toggle () simplemente alterna la visibilidad de los elementos"
Zach Spencer
2
eso es en realidad lo contrario de lo que quería. Quería que el estado actual del elemento fuera irrelevante. El estado debe basarse en una variable booleana.
Aakil Fernandes
@AakilFernandes ¿Entonces la variable isShownno es relevante para $elementser visible o no? ¿Pero una variable separada no relacionada con el elemento?
Spencer Wieczorek
Sí, lo siento, probablemente debería isShownshouldElementBeVisible
haberme
0

La función .toggle()cambia eldisplay del elemento.

Si desea cambiar visibility, en cambio, le sugiero que use el ?:operador. Para esto, en su CSS, establezca la visibilidad en el estado original, y en el JS simplemente ponga:

    var checkboxChecked = $("#yourCheckbox").(":checked");

    $("#yourElement").css("visibility", checkboxChecked ? "visible" : "hidden");
Mel
fuente