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)

— Aakil Fernandes
fuente

jQuery mostrar u ocultar

— George

@SpencerWieczorek esa pregunta hace referencia toggle, pero es una pregunta diferente

— Aakil Fernandes

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

2

jQuery tiene toggle: http://api.jquery.com/toggle/

$element.toggle();

Esto mostrará el elemento si está oculto y lo ocultará si se muestra.

— Miguel
fuente

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