Phương thức toggle() của jQuery có thể coi như công tắc đèn. Khi gọi, nó chuyển đổi phần tử được chọn "bật" hoặc "tắt". Nghĩa là, nó chuyển đổi giữa hiển thị phần tử cho người dùng hoặc ẩn chúng. Trong ví dụ sau, chúng ta sẽ khám phá cách dùng toggle() để ẩn và hiển thị văn bản khi nút được nhấp.
jQuery toggle() là gì?
Phương thức toggle() của jQuery hiển thị hoặc ẩn các phần tử được chọn trên trang web. Giống như ý của từ, phương thức này hoạt động như công tắc đèn để bật/tắt phần tử. Thông thường toggle() được gọi với nút HTML nhưng thực tế có thể gọi trên bất kỳ phần tử được chọn nào.
Ngoài việc chuyển đổi hiển thị giữa "bật" và "tắt", jQuery toggle() chấp nhận đối số cho thời gian (duration). Đối số duration có thể là kiểu số hoặc chuỗi. Cung cấp đối số duration sẽ tạo hiệu ứng chuyển động kéo dài theo thời gian chỉ định.
jQuery toggle() cũng chấp nhận hàm callback thực thi khi hoạt ảnh hoàn tất. Nhớ rằng, hàm callback là hàm được truyền cho hàm khác để thực thi sau. Nếu không cung cấp đối số, toggle() sẽ chỉ chuyển đổi hiển thị "bật" hoặc "tắt".
Hãy xem cú pháp cơ bản rồi đi sâu với mã ví dụ. Mã ví dụ sẽ bao gồm hoạt ảnh chuyển đổi giữa ảnh và văn bản.
Cú pháp toggle() jQuery
Như nói ở phần giới thiệu, phương thức toggle() mặc định có thể coi như công tắc đèn. Một khi nhấp, nó bật/tắt phần tử được chọn trong hiển thị. Giống như mọi phương thức jQuery, phần tử phải được chọn trước khi gọi toggle().
Hãy xem ví dụ dùng toggle() không có đối số. Bắt đầu với tệp HTML:
<button> Nhấn tôi </button> <p> Đọc tôi! </p> <p id="hide" style="display: none"> KHÔNG! ĐỌC TÔI! </p>
Từ đây, ta thấy tệp HTML hiển thị nút và hai thẻ đoạn văn. Chú ý thuộc tính style của thẻ <p> với id "hide". Đặt display là none sẽ ẩn phần tử đoạn văn đó khỏi hiển thị.
81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.
Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.
Tệp HTML hiển thị đúng như dự đoán. Bây giờ dùng jQuery toggle để hiện thẻ <p> ẩn. Trong ví dụ này, ta sẽ đưa jQuery vào tệp HTML. Để làm vậy, phải gói jQuery trong thẻ <script>:
<script>
$("button").click(function() {
$("#hide").toggle();
})
</script>
Giống như mọi phương thức jQuery, trước tiên phải chọn phần tử. Ở đây, ta chọn phần tử nút và gọi phương thức click(). Phương thức click() về cơ bản gắn trình lắng nghe sự kiện vào nút được chọn. Khi nút được nhấp, nó gọi hàm callback và thực thi phương thức toggle(). Đọc thêm về jQuery click() tại đây.
Hãy xem mã hoạt động.
Tuyệt vời! Khi nhấp nút, thẻ đoạn văn ẩn được hiển thị. Bây giờ đã quen cú pháp toggle(), hãy xem ví dụ dùng hoạt ảnh.
jQuery toggle() hoạt động
Cho đến nay ta đã thấy toggle() ẩn hoặc hiển thị phần tử được chọn. Bây giờ xem ví dụ hoạt ảnh phức tạp hơn một chút. Đừng lo, chúng ta đã thảo luận hầu hết khái niệm ở phần trên!
Với ví dụ, ta sẽ hiển thị nút, hình ảnh và văn bản bao bọc trong thẻ <p>. Tệp HTML sẽ trông như sau:
<button> Nhấn tôi </button> <img id="cat" src="https://images.pexels.com/photos/2256259/pexels-photo-2256259.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <p style="display: none"> Hoạt ảnh hoàn tất </p>
Chú ý lại, phần tử đoạn văn sẽ ẩn do giá trị thuộc tính display.
Con mèo may mắn đang hiển thị cùng nút. Vì thuộc tính style của thẻ <p> đặt là "display: none", văn bản bị ẩn. Bây giờ, hãy thử ẩn từ từ hình ảnh và hiện văn bản khi nút được nhấp.
Đối số duration trong jQuery toggle có thể là số hoặc chuỗi. Nếu là số, số đó đại diện cho mili giây. Với giá trị chuỗi, toggle() chấp nhận "fast" hoặc "slow", tương ứng 600 hoặc 200 mili giây.
Ví dụ, ta muốn ẩn từ từ hình ảnh, nên dùng "slow" làm đối số cho toggle(). Giống ví dụ đầu, ta gói jQuery trong thẻ script cuối tệp HTML.
<script>
$('button').click(function() {
$('#cat').toggle('slow', function() {
$('p').toggle();
})
})
</script>
Sau khi chọn nút và gọi click(), hàm callback đầu tiên ẩn ảnh mèo. Truyền chuỗi "slow" cho toggle(), ta có thể truyền hàm callback thêm. Hàm callback này thực thi sau khi 200 mili giây trôi qua.
Khi thời gian "slow" hết hạn, ta sẽ bật thẻ đoạn văn "bật". Điều này sẽ hiển thị thẻ <p> cho người dùng.
Qua gif tiện lợi, ta thấy hình ảnh mất thời gian ẩn và ngay lập tức được thay bằng văn bản. Bằng cách kết hợp các cách dùng toggle(), ta đã tạo hoạt ảnh động với ít dòng mã.
Kết luận
Chúng ta đã thảo luận jQuery toggle() là gì và làm gì. Sau đó xem cú pháp với mã ví dụ. Tiếp theo, lấy những gì học được kết hợp để tạo hoạt ảnh đơn giản với hình ảnh.
Bây giờ bạn đã quen với jQuery toggle(), có thể bắt đầu bật/tắt phần tử trong dự án tiếp theo. Hoặc thậm chí thêm hoạt ảnh cho hình ảnh khi nút được nhấp. Nếu muốn đọc thêm về jQuery toggle(), xem tài liệu chính thức. Chúc vui lập trình!