Masquer / afficher l'élément avec un booléen

109

J'ai tendance à en avoir beaucoup dans mon code

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

Existe-t-il un moyen plus élégant avec javascript, jquery ou underscore? Idéalement, je veux quelque chose qui ressemble à ça

$element.showOrHideDependingOn(shouldElementBeVisible)

— Aakil Fernandes
source

jQuery afficher ou masquer

— George

@SpencerWieczorek cette question fait référence toggle, mais c'est une question différente

— Aakil Fernandes

166

Apparemment, vous pouvez simplement passer un booléen à la togglefonction

$element.toggle(shouldElementBeVisible)

— Aakil Fernandes
source

34

Je recommande d'utiliser $element.toggle(!!shouldElementBeVisible)pour éviter de heurter accidentellement l'une des autres "surcharges" , à moins bien sûr que vous ne soyez sûr que la variable est une valeur booléenne.

— Jeroen

8

Une meilleure option pourrait être $element.toggle(shouldElementBeVisible == true).

— jox

"0"et "false"sont traités très différemment de falsetoute façon, donc je ne pense pas que cette distinction compte vraiment - même 0serait incorrecte si vous voulez qu'elle soit cachée, puisque toutes ces durées d'animation définies, mais toujours inverser la visibilité.

— Tasgall

19

Oui il y a!

$element.toggle();

Sans aucun paramètre, togglebascule simplement la visibilité des éléments (je ne parle pas de la visibilitypropriété) et dépend de l'état actuel de l'élément.

$element.toggle(display);

Si vous appelez toggleavec un paramètre booléen, l'élément est affiché s'il l'est trueet hiddens'il l'estfalse

la source

— Zach Spencer
source

2

J'étais sur le point de marquer cette erreur, puis j'ai réalisé que la dernière référence API vous permet de définir un booléen au lieu d'un objet d'options.

— Aakil Fernandes le

quelques lignes en dessous: "Sans paramètres, la méthode .toggle () bascule simplement la visibilité des éléments"

— Zach Spencer

2

c'est en fait le contraire de ce que je voulais. Je voulais que l'état actuel de l'élément ne soit pas pertinent. L'état doit être basé sur une variable booléenne.

— Aakil Fernandes le

@AakilFernandes Donc, la variable isShownn'est pas pertinente pour $elementêtre visible ou pas? Mais une variable distincte non liée à l'élément?

— Spencer Wieczorek

Oui, désolé, j'aurais probablement dû renommer isShownquelque chose comme shouldElementBeVisiblepour le rendre plus évident

— Aakil Fernandes

2

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

$element.toggle();

Cela montrera l'élément s'il est caché et le cachera s'il est affiché.

— Mike
source

0

La fonction .toggle()change le displayde l'élément.

Si vous souhaitez modifier visibility, à la place, je vous suggère d'utiliser l' ?:opérateur. Pour cela, sur votre CSS, définissez la visibilité sur l'état d'origine, et dans le JS, mettez simplement:

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

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

— Mel
source