Kawal paparan dan penyembunyian elemen melalui jQuery-tutorial js-php.cn

Kawal paparan dan penyembunyian elemen melalui jQuery

WBOY

Lepaskan： 2024-02-25 20:51:07

asal

1241 orang telah melayarinya

Kawal paparan dan penyembunyian elemen melalui jQuery

Tajuk: Penukaran elemen yang kelihatan dan tidak kelihatan melalui jQuery

Dalam pembangunan web, kami sering menghadapi keperluan untuk mengawal status unsur yang kelihatan dan tidak kelihatan dengan mengklik butang atau acara lain. Fungsi ini boleh dicapai dengan mudah menggunakan jQuery Seterusnya, kami akan menggunakan contoh kod khusus untuk menggambarkan cara menggunakan jQuery untuk bertukar antara elemen yang kelihatan dan tidak kelihatan.

Mula-mula, tambah butang dan elemen yang perlu mengawal keterlihatan dalam fail HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery可见与不可见切换</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="toggleButton">切换元素可见性</button>
    <div id="toggleElement" style="display: none;">
        这是需要切换可见性的元素
    </div>

    <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Seterusnya, buat fail JavaScript baharu bernama script.js dalam direktori projek dan tulis Kod berikut : script.js的JavaScript文件，编写以下代码：

$(document).ready(function() {
    $('#toggleButton').click(function() {
        $('#toggleElement').toggle();
    });
});

Salin selepas log masuk

在这段代码中，我们首先使用$(document).ready()来确保DOM加载完成后执行代码。然后通过$('#toggleButton').click()来监听按钮的点击事件。在点击按钮时，调用$('#toggleElement').toggle()方法来切换#toggleElement元素的可见与不可见状态。

最后，在浏览器中打开HTML文件，点击按钮即可看到#toggleElementrrreee

Dalam kod ini, kami mula-mula menggunakan $(document).ready() untuk memastikan kod tersebut dilaksanakan selepas DOM dimuatkan. Kemudian dengar acara klik butang melalui $('#toggleButton').click(). Apabila butang diklik, kaedah $('#toggleElement').toggle() dipanggil untuk menukar keadaan boleh dilihat dan tidak kelihatan bagi elemen #toggleElement.

Akhir sekali, buka fail HTML dalam penyemak imbas dan klik butang untuk melihat togol elemen #toggleElement antara kelihatan dan tidak kelihatan. 🎜🎜Melalui contoh mudah ini, kita dapat melihat bahawa jQuery boleh digunakan untuk bertukar dengan mudah antara elemen kelihatan dan tidak kelihatan, membawa lebih banyak interaktiviti dan dinamik kepada pembangunan web. Sintaks jQuery yang ringkas dan berkuasa membolehkan kami melaksanakan pelbagai fungsi dengan pantas dan menyediakan pengalaman menyemak imbas yang lebih baik kepada pengguna. 🎜

Atas ialah kandungan terperinci Kawal paparan dan penyembunyian elemen melalui jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!