Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk menyembunyikan elemen span dalam jquery (tiga kaedah)

Bagaimana untuk menyembunyikan elemen span dalam jquery (tiga kaedah)

PHPz
Lepaskan: 2023-04-10 14:50:39
asal
2167 orang telah melayarinya

Dalam reka bentuk web, jQuery sering digunakan untuk mencapai beberapa kesan dinamik. Antaranya, mengawal paparan dan menyembunyikan elemen juga merupakan keperluan biasa. jQuery menyediakan pelbagai cara untuk menyembunyikan elemen rentang, dan artikel ini akan memperkenalkan beberapa daripadanya.

1. Gunakan kaedah hide()

kaedah hide() jQuery boleh menyembunyikan elemen tertentu.

$(selector).hide();
Salin selepas log masuk

Di mana pemilih ialah pemilih elemen yang hendak disembunyikan. Apabila kaedah ini dipanggil, elemen disembunyikan. Jika anda ingin menyembunyikan elemen span, anda boleh melakukannya dengan kod berikut:

$("span").hide();
Salin selepas log masuk

Pemilih di sini ialah "span", yang bermaksud untuk memilih semua elemen span dalam halaman dan menyembunyikannya. Perlu diingat bahawa jika terdapat berbilang elemen rentang pada halaman yang sama, kaedah ini akan menyembunyikan semua elemen rentang pada masa yang sama.

2. Gunakan kaedah CSS

Anda juga boleh menggunakan kaedah CSS untuk mengawal paparan dan penyembunyian elemen.

$(selector).css("display", "none");
Salin selepas log masuk

Antaranya, pemilih ialah pemilih elemen yang perlu disembunyikan. "paparan" ialah nama sifat CSS yang akan ditetapkan dan "tiada" ialah nilai sifat yang akan ditetapkan. Apabila kod ini dilaksanakan, elemen akan disembunyikan. Untuk menyembunyikan elemen span, anda boleh menggunakan kod berikut:

$("span").css("display", "none");
Salin selepas log masuk

Pemilih di sini masih "span", yang bermaksud ia digunakan untuk semua elemen span.

Apabila menggunakan kaedah ini, sila ambil perhatian: jika elemen mempunyai atribut "paparan" yang ditakrifkan dalam helaian gaya CSS asal, maka kaedah ini akan menimpa gaya asal.

3. Gunakan kaedah toggle()

Kaedah toggle() ialah fungsi yang disediakan oleh jQuery untuk mengawal paparan dan penyembunyian elemen. Apabila parameter yang diluluskan adalah benar, elemen yang ditentukan akan disembunyikan apabila parameter yang diluluskan adalah palsu, elemen tersebut akan dipaparkan.

$(selector).toggle(true/false);
Salin selepas log masuk

Pemilih di sini mewakili pemilih elemen untuk disembunyikan atau dipaparkan. Untuk menyembunyikan elemen span, anda boleh menggunakan kod berikut:

$("span").toggle(true);
Salin selepas log masuk

Pemilih di sini masih "span".

Jika elemen itu sendiri tersembunyi, elemen itu akan ditunjukkan; jika elemen itu sendiri ditunjukkan, elemen itu akan disembunyikan.

Selain menghantar benar/salah sebagai parameter, kaedah toggle() juga boleh menerima parameter lain. Penggunaannya ditunjukkan dalam jadual berikut:

参数 用途
[duration] 规定动画的速度。默认值是 "normal"。
[callback] 规定在动画完成后要执行的函数。
[queueName] 规定要使用的队列的名称(一个字符串)。
[switchFlag] 如果设置为 true,则只有在元素处于原始状态时执行动画。否则,每次都会执行动画。

Sebagai contoh, anda boleh menggunakan kod berikut untuk menyembunyikan elemen span:

$("span").toggle("slow");
Salin selepas log masuk

"perlahan" di sini bermaksud bahawa animasi lebih perlahan dan elemen Disembunyikan secara perlahan.

4. Ringkasan

Artikel ini memperkenalkan tiga kaedah untuk menyembunyikan elemen span: menggunakan kaedah hide(), CSS dan toggle(). Dalam pembangunan sebenar, kaedah yang paling sesuai harus dipilih berdasarkan keperluan sebenar. Tidak kira kaedah yang anda gunakan, anda boleh menunjukkan dan menyembunyikan elemen dengan mudah melalui jQuery.

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan elemen span dalam jquery (tiga kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan