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)


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

Risposte:


166

Apparentemente puoi semplicemente passare un booleano alla togglefunzione

$element.toggle(shouldElementBeVisible)

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


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


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");
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.