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)

— Aakil Fernandes
sumber

jQuery tampilkan atau sembunyikan

— George

@SpencerWieczorek pertanyaan itu kebetulan merujuk toggle, tetapi pertanyaannya berbeda

— Aakil Fernandes

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

2

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

$element.toggle();

Ini akan menampilkan elemen jika tersembunyi, dan menyembunyikannya jika ditampilkan.

— Mike
sumber

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