Bagaimana untuk menentukan sama ada elemen tersembunyi atau dipaparkan dalam jquery

Kata Pengantar

Dalam pembangunan web, kita selalunya perlu menukar paparan atau menyembunyikan sesuatu elemen mengikut operasi pengguna. Pada masa ini, anda perlu menggunakan beberapa API dalam jQuery untuk mencapainya. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menentukan status unsur yang tersembunyi dan dipaparkan, dan cara menukar statusnya.

1. Tentukan sama ada elemen itu tersembunyi

Kita boleh menggunakan kaedah .is(":hidden") untuk menentukan sama ada elemen itu tersembunyi. Kod sampel adalah seperti berikut:

if ($("#test").is(":hidden")) {
  console.log("The element is hidden.");
} else {
  console.log("The element is visible.");
}

Dalam kod di atas, kita mula-mula mencari elemen dengan ujian ID, dan kemudian gunakan kaedah .is(":hidden") untuk menentukan sama ada ia tersembunyi . Jika elemen tersembunyi, cetak Elemen disembunyikan.; jika tidak, cetak Elemen kelihatan..

2. Tentukan sama ada elemen dipaparkan

Untuk menentukan sama ada elemen dipaparkan, kita boleh menggunakan kaedah .is(":visible"). Kod sampel adalah seperti berikut:

if ($("#test").is(":visible")) {
  console.log("The element is visible.");
} else {
  console.log("The element is hidden.");
}

Dalam kod di atas, kami masih menemui elemen dengan ujian ID, dan kemudian menggunakan kaedah .is(":visible") untuk menentukan sama ada ia dipaparkan . Jika elemen dipaparkan, cetak Elemen kelihatan.; jika tidak, cetak Elemen tersembunyi..

3. Tukar keadaan paparan/sembunyikan elemen

Jika kita ingin menukar keadaan paparan/sembunyikan elemen, kita boleh menggunakan kaedah .toggle(). Kaedah ini secara automatik akan menentukan keadaan elemen Jika elemen sedang disembunyikan, ia akan dipaparkan sebaliknya. Kod sampel adalah seperti berikut:

$("#test").toggle();

Dalam kod di atas, kita mula-mula mencari elemen dengan ujian ID, dan kemudian gunakan kaedah .toggle() untuk menukar keadaan paparan/sembunyikannya.

Perlu diambil perhatian bahawa apabila kaedah .toggle() tidak melepasi parameter, ia hanya menukar keadaan paparan/tersembunyi elemen jika parameter diluluskan, maka kaedah ini akan menukar paparan/sembunyikan keadaan elemen mengikut nilai parameter . Contohnya:

$("#test").toggle(true);

Dalam kod di atas, kami menetapkan parameter kepada benar, yang bermaksud untuk menetapkan keadaan paparan elemen untuk dipaparkan. Jika elemen sudah dipaparkan, kaedah ini tidak akan memberi kesan.

4. Tunjukkan/Sembunyikan Elemen

Jika kita mahu menunjukkan/menyembunyikan elemen secara langsung dan bukannya menukar keadaannya, kita boleh menggunakan kaedah .show() dan .hide(). Kaedah

.show() boleh memaparkan elemen Kod sampel adalah seperti berikut:

$("#test").show();

Dalam kod di atas, kami menetapkan keadaan paparan elemen untuk ditunjukkan. Kaedah

.hide() boleh menyembunyikan elemen Kod sampel adalah seperti berikut:

$("#test").hide();

Dalam kod di atas, kami menetapkan keadaan paparan elemen kepada tersembunyi.

Perlu diambil perhatian bahawa kaedah .show() dan .hide() mempunyai beberapa parameter pilihan yang boleh digunakan untuk mengawal kelajuan dan kaedah kesan animasi. Untuk mendapatkan maklumat tentang cara menggunakan parameter ini, sila rujuk dokumentasi rasmi jQuery.

5. Ringkasan

Melalui pengenalan artikel ini, kami telah mempelajari cara menggunakan jQuery untuk menentukan keadaan paparan/tersembunyi elemen, dan cara menukar keadaannya. Dalam pembangunan sebenar, kami boleh melaksanakan banyak fungsi menarik berdasarkan API ini, seperti menukar keadaan paparan/tersembunyi elemen apabila pengguna mengklik butang atau menukar kandungan paparan elemen dalam masa nyata berdasarkan input pengguna, dsb. .

Atas ialah kandungan terperinci Bagaimana untuk menentukan sama ada elemen tersembunyi atau dipaparkan dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!