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)

— Aakil Fernandes
quelle

jQuery zeigen oder verstecken

— George

@SpencerWieczorek diese Frage bezieht sich zufällig toggle, aber es ist eine andere Frage

— Aakil Fernandes

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