Element mit einem Booleschen Wert ausblenden / anzeigen

109

Ich neige dazu, viele davon in meinem Code zu haben

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

Gibt es eine elegantere Art, mit Javascript, JQuery oder Unterstrich verpackt zu sein? Idealerweise möchte ich etwas, das so aussieht

$element.showOrHideDependingOn(shouldElementBeVisible)
javascript jquery underscore.js visibility Aakil Fernandes
quelle
jQuery zeigen oder verstecken
George
@SpencerWieczorek diese Frage bezieht sich zufällig toggle, aber es ist eine andere Frage
Aakil Fernandes

Antworten:

165

Anscheinend können Sie der toggleFunktion einfach einen Booleschen Wert übergeben

$element.toggle(shouldElementBeVisible)
Aakil Fernandes
quelle
34
Ich empfehle die Verwendung $element.toggle(!!shouldElementBeVisible), um zu verhindern, dass versehentlich eine der anderen "Überladungen" getroffen wird , es sei denn, Sie sind sich sehr sicher, dass die Variable ein boolescher Wert ist.
Jeroen
7
Eine bessere Option könnte sein $element.toggle(shouldElementBeVisible == true).
Jox
"0"und "false"werden ganz anders behandelt als falsesowieso, daher denke ich nicht, dass Unterscheidung wirklich wichtig ist - 0wäre sogar falsch, wenn Sie möchten, dass sie ausgeblendet wird, da all diese Animationszeiten festgelegt sind, aber dennoch die Sichtbarkeit umkehren.
Tasgall
19

Ja da ist!

$element.toggle();

Schaltet ohne Parameter toggleeinfach die Sichtbarkeit der Elemente um (ich meine nicht die visibilityEigenschaft) und hängt vom aktuellen Status des Elements ab.

$element.toggle(display);

Wenn Sie togglemit einem booleschen Parameter aufrufen , wird das Element angezeigt, wenn dies der Fall ist trueund hiddenwenn dies der Fall istfalse

Quelle

Zach Spencer
quelle
2
Ich wollte dies als falsch markieren, dann wurde mir klar, dass Sie mit der letzten API-Referenz einen Booleschen Wert anstelle eines Optionsobjekts festlegen können.
Aakil Fernandes
ein paar Zeilen darunter: "Ohne Parameter schaltet die .toggle () -Methode einfach die Sichtbarkeit von Elementen um"
Zach Spencer
2
das ist eigentlich das Gegenteil von dem, was ich wollte. Ich wollte, dass der aktuelle Status des Elements irrelevant ist. Der Status sollte auf einer booleschen Variablen basieren.
Aakil Fernandes
@AakilFernandes Die Variable isShownist also nicht relevant für das $elementSichtbare oder nicht? Aber eine separate Variable, die nicht mit dem Element zusammenhängt?
Spencer Wieczorek
Ja, tut mir leid, ich sollte wahrscheinlich in isShownetwas umbenannt werden , shouldElementBeVisibleum es offensichtlicher zu machen
Aakil Fernandes
2

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

$element.toggle();

Dadurch wird das Element angezeigt, wenn es ausgeblendet ist, und ausgeblendet, wenn es angezeigt wird.

Mike
quelle
0

Die Funktion .toggle()ändert die displaydes Elements.

Wenn Sie visibilitystattdessen ändern möchten , würde ich die Verwendung des ?:Operators vorschlagen . Stellen Sie dazu in Ihrem CSS die Sichtbarkeit auf den ursprünglichen Zustand ein und geben Sie im JS einfach Folgendes ein:

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

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