Ocultar / mostrar o elemento com um booleano

109

Costumo ter muitos deles no meu código

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

Existe alguma forma mais elegante empacotada com javascript, jquery ou sublinhado? Idealmente, eu quero algo parecido com isto

$element.showOrHideDependingOn(shouldElementBeVisible)

— Aakil Fernandes
fonte

jQuery show or hide

— George

@SpencerWieczorek essa pergunta passa a ser de referência toggle, mas é uma pergunta diferente

— Aakil Fernandes

166

Aparentemente, você pode simplesmente passar um booleano para a togglefunção

$element.toggle(shouldElementBeVisible)

— Aakil Fernandes
fonte

34

Eu recomendo usar $element.toggle(!!shouldElementBeVisible)para evitar bater acidentalmente em uma das outras "sobrecargas" , a menos, é claro, que você tenha certeza de que a variável é um valor booleano.

— Jeroen

7

Pode ser uma opção melhor $element.toggle(shouldElementBeVisible == true).

— jox

"0"e "false"são tratados de forma muito diferente de falsequalquer maneira, então eu não acho que essa distinção realmente importe - até 0seria incorreto se você quiser que ele seja escondido, uma vez que todos aqueles tempos de animação definidos, mas ainda assim invertem a visibilidade.

— Tasgall de

19

Sim existe!

$element.toggle();

Sem nenhum parâmetro, toggleapenas alterna a visibilidade dos elementos (não me refiro à visibilitypropriedade) e depende do estado atual do elemento.

$element.toggle(display);

Se você chamar togglecom um parâmetro booleano, o elemento será mostrado se for truee hiddense forfalse

fonte

— Zach Spencer
fonte

2

Eu estava prestes a marcar isso errado, então percebi que a última referência da API permite que você defina um booleano em vez de um objeto de opções.

— Aakil Fernandes

algumas linhas abaixo: "Sem parâmetros, o método .toggle () simplesmente alterna a visibilidade dos elementos"

— Zach Spencer

2

isso é realmente o oposto do que eu queria. Eu queria que o estado atual do elemento fosse irrelevante. O estado deve ser baseado em uma variável booleana.

— Aakil Fernandes

@AakilFernandes Então a variável isShownnão é relevante para $elementser visível ou não? Mas uma variável separada não relacionada ao elemento?

— Spencer Wieczorek

Sim, desculpe, provavelmente deveria ter renomeado isShownpara algo como shouldElementBeVisiblepara tornar mais óbvio

— Aakil Fernandes

2

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

$element.toggle();

Isso mostrará o elemento se estiver oculto e ocultará se estiver mostrado.

— Mike
fonte

0

A função .toggle()muda o displaydo elemento.

Se você quiser mudar visibility, em vez disso, sugiro usar a ?:operadora. Para isso, no seu CSS, defina a visibilidade para o estado original, e no JS basta colocar:

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

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

— Mel
fonte