Sembunyikan / tampilkan elemen dengan boolean


109

Saya cenderung memiliki banyak ini dalam kode saya

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

Apakah ada cara yang lebih elegan yang dikemas dengan javascript, jquery, atau underscore? Idealnya saya menginginkan sesuatu yang terlihat seperti ini

$element.showOrHideDependingOn(shouldElementBeVisible)


@SpencerWieczorek pertanyaan itu kebetulan merujuk toggle, tetapi pertanyaannya berbeda
Aakil Fernandes

Jawaban:


166

Rupanya Anda bisa meneruskan boolean ke togglefungsi tersebut

$element.toggle(shouldElementBeVisible)

34
Saya merekomendasikan penggunaan $element.toggle(!!shouldElementBeVisible)untuk mencegah secara tidak sengaja mengenai salah satu "kelebihan" lainnya , kecuali tentu saja Anda sangat yakin bahwa variabel tersebut adalah nilai boolean.
Jeroen

8
Pilihan yang lebih baik mungkin $element.toggle(shouldElementBeVisible == true).
jox

"0"dan "false"diperlakukan sangat berbeda dari falsebagaimanapun, jadi menurut saya perbedaan itu tidak terlalu penting - bahkan 0akan salah jika Anda ingin menyembunyikannya, karena semua waktu animasi yang ditetapkan tetapi visibilitas masih berubah.
Tasgall

19

Ya ada!

$element.toggle();

Tanpa parameter apa pun, togglecukup matikan visibilitas elemen (maksud saya bukan visibilityproperti) dan bergantung pada status elemen saat ini.

$element.toggle(display);

Jika Anda memanggil toggledengan parameter boolean, elemen akan ditampilkan jika ada truedan hiddenjika yafalse

sumber


2
Saya akan menandai ini salah, kemudian saya menyadari bahwa referensi API terakhir memungkinkan Anda untuk menyetel boolean alih-alih objek opsi.
Aakil Fernandes

beberapa baris di bawahnya: "Tanpa parameter, metode .toggle () hanya mengubah visibilitas elemen"
Zach Spencer

2
itu sebenarnya kebalikan dari apa yang kuinginkan. Saya ingin kondisi elemen saat ini menjadi tidak relevan. Status harus didasarkan pada variabel boolean.
Aakil Fernandes

@AakilFernandes Jadi variabel isShowntersebut tidak relevan dengan $elementyang terlihat atau tidak? Tetapi variabel terpisah tidak terkait dengan elemen?
Spencer Wieczorek

Ya, maaf saya mungkin harus mengganti namanya isShownmenjadi sesuatu seperti shouldElementBeVisibleuntuk membuatnya lebih jelas
Aakil Fernandes


0

Fungsi .toggle()mengubah displayelemen.

Jika Anda ingin berubah visibility, saya sarankan menggunakan ?:operator. Untuk ini, pada CSS Anda, atur visibilitas ke keadaan asli, dan di JS sederhananya:

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

    $("#yourElement").css("visibility", checkboxChecked ? "visible" : "hidden");
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.