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)
javascript jquery underscore.js visibility Aakil Fernandes
sumber
jQuery tampilkan atau sembunyikan
George
@SpencerWieczorek pertanyaan itu kebetulan merujuk toggle, tetapi pertanyaannya berbeda
Aakil Fernandes

Jawaban:

166

Rupanya Anda bisa meneruskan boolean ke togglefungsi tersebut

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

Zach Spencer
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");
Mel
sumber