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)
javascript jquery underscore.js visibility Aakil Fernandes
fonte
jQuery show or hide
George
@SpencerWieczorek essa pergunta passa a ser de referência toggle, mas é uma pergunta diferente
Aakil Fernandes

Respostas:

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
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