Ukryj / pokaż element z wartością logiczną

109

Mam ich dużo w swoim kodzie

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

Czy jest jakiś bardziej elegancki sposób w pakiecie z javascript, jquery lub podkreśleniem? Idealnie chciałbym coś, co wygląda tak

$element.showOrHideDependingOn(shouldElementBeVisible)
javascript jquery underscore.js visibility Aakil Fernandes
źródło
jQuery show or hide
George
@SpencerWieczorek że sprawa dzieje się odniesienia toggle, ale jest to inna kwestia
Aakil Fernandes

Odpowiedzi:

166

Najwyraźniej możesz po prostu przekazać wartość logiczną do togglefunkcji

$element.toggle(shouldElementBeVisible)
Aakil Fernandes
źródło
34
Zalecam używanie, $element.toggle(!!shouldElementBeVisible)aby zapobiec przypadkowemu uderzeniu jednego z innych „przeciążeń” , chyba że oczywiście masz pewność, że zmienna jest wartością logiczną.
Jeroen
8
Mogłaby być lepsza opcja $element.toggle(shouldElementBeVisible == true).
jox,
"0"i "false"są traktowane zupełnie inaczej niż w falsekażdym razie, więc nie sądzę, że to rozróżnienie naprawdę ma znaczenie - nawet 0byłoby niepoprawne, gdybyś chciał, aby było ukryte, ponieważ wszystkie te czasy animacji są ustawione, ale nadal mają odwróconą widoczność.
Tasgall
19

Tak jest!

$element.toggle();

Bez żadnych parametrów togglepo prostu przełącza widoczność elementów (nie mam na myśli visibilitywłaściwości) i zależy od aktualnego stanu elementu.

$element.toggle(display);

Jeśli wywołujesz togglez parametrem boolowskim, element jest wyświetlany, jeśli tak jest truei hiddenjeśli jestfalse

źródło

Zach Spencer
źródło
2
Już miałem to oznaczyć źle, ale zdałem sobie sprawę, że ostatnia referencja API pozwala ustawić obiekt logiczny zamiast obiektu opcji.
Aakil Fernandes
kilka linijek poniżej: „Bez parametrów metoda .toggle () po prostu przełącza widoczność elementów”
Zach Spencer,
2
to właściwie przeciwieństwo tego, czego chciałem. Chciałem, aby aktualny stan elementu był nieistotny. Stan powinien być oparty na zmiennej boolowskiej.
Aakil Fernandes
@AakilFernandes Więc zmienna isShownnie ma znaczenia dla $elementbycia widocznym czy nie? Ale osobna zmienna niezwiązana z elementem?
Spencer Wieczorek
Tak, przepraszam, prawdopodobnie powinienem zmienić nazwę isShownna coś w rodzaju, shouldElementBeVisibleaby było to bardziej oczywiste
Aakil Fernandes
0

Funkcja .toggle()zmienia displayelement.

Jeśli chcesz to zmienić visibility, sugerowałbym użycie ?:operatora. W tym celu w swoim CSS ustaw widoczność na pierwotny stan, aw JS po prostu umieść:

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

    $("#yourElement").css("visibility", checkboxChecked ? "visible" : "hidden");
Mel
źródło