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)
javascript jquery underscore.js visibility Aakil Fernandes
la source
jQuery afficher ou masquer
George
@SpencerWieczorek cette question fait référence toggle, mais c'est une question différente
Aakil Fernandes

Réponses:

166

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

$element.toggle(shouldElementBeVisible)
Aakil Fernandes
la 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
la 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
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
la source