Nascondi / mostra l'elemento con un valore booleano

109

Tendo ad averne molti nel mio codice

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

Esiste un modo più elegante confezionato con javascript, jquery o underscore? Idealmente voglio qualcosa che assomigli a questo

$element.showOrHideDependingOn(shouldElementBeVisible)

— Aakil Fernandes
fonte

jQuery mostra o nascondi

— George

@SpencerWieczorek quella domanda fa riferimento toggle, ma è una domanda diversa

— Aakil Fernandes

166

Apparentemente puoi semplicemente passare un booleano alla togglefunzione

$element.toggle(shouldElementBeVisible)

— Aakil Fernandes
fonte

34

Ne consiglio l'utilizzo $element.toggle(!!shouldElementBeVisible)per evitare di colpire accidentalmente uno degli altri "sovraccarichi" , a meno che, ovviamente, non siate sicuri che la variabile sia un valore booleano.

— Jeroen

7

Potrebbe essere un'opzione migliore $element.toggle(shouldElementBeVisible == true).

— jox

"0"e "false"sono trattati in modo molto diverso da quello in falseogni caso, quindi non penso che la distinzione abbia davvero importanza - 0sarebbe anche sbagliato se vuoi che sia nascosta, dal momento che tutti quei tempi di animazione impostati ma ancora ribaltano la visibilità.

— Tasgall

19

Si C'è!

$element.toggle();

Senza alcun parametro, togglealterna solo la visibilità degli elementi (non intendo la visibilityproprietà) e dipende dallo stato corrente dell'elemento.

$element.toggle(display);

Se chiami togglecon un parametro booleano, l'elemento viene mostrato se lo è truee hiddense lo èfalse

fonte

— Zach Spencer
fonte

2

Stavo per contrassegnare questo errore, poi mi sono reso conto che l'ultimo riferimento API consente di impostare un booleano invece di un oggetto opzioni.

— Aakil Fernandes

poche righe sotto: "Senza parametri, il metodo .toggle () alterna semplicemente la visibilità degli elementi"

— Zach Spencer

2

questo è effettivamente l'opposto di quello che volevo. Volevo che lo stato attuale dell'elemento fosse irrilevante. Lo stato dovrebbe essere basato su una variabile booleana.

— Aakil Fernandes

@AakilFernandes Quindi la variabile isShownnon è rilevante per l' $elementessere visibile o no? Ma una variabile separata non correlata all'elemento?

— Spencer Wieczorek

Sì, scusa, probabilmente avrei dovuto rinominare isShownin qualcosa di simile shouldElementBeVisibleper renderlo più ovvio

— Aakil Fernandes

2

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

$element.toggle();

Questo mostrerà l'elemento se è nascosto e lo nasconderà se è mostrato.

— Mike
fonte

0

La funzione .toggle()cambia displayil valore dell'elemento.

Se vuoi cambiare visibility, invece, ti consiglio di utilizzare l' ?:operatore. Per questo, sul tuo CSS, imposta la visibilità allo stato originale e nel JS metti semplicemente:

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

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

— Mel
fonte