Thời gian đọc: 3 phút
Trong jQuery, hasClass()
là một trong những phương thức phổ biến và hữu ích thuộc nhóm jQuery Attributes. Phương thức này cho phép bạn kiểm tra xem một phần tử HTML có chứa một hoặc nhiều lớp (class) nhất định hay không. Điều này rất hữu ích khi bạn muốn thực hiện các thao tác dựa trên việc kiểm tra sự hiện diện của các lớp trong một phần tử.
hasClass()
$(selector).hasClass(className)
Giả sử chúng ta có một phần tử HTML như sau:
Bây giờ, chúng ta sẽ sử dụng hasClass()
để kiểm tra xem phần tử này có chứa lớp "active"
hay không:
if ($(".box").hasClass("active")) {
console.log("Phần tử có lớp 'active'.");
} else {
console.log("Phần tử không có lớp 'active'.");
}
Kết quả: Phần tử có lớp 'active'.
hasClass()
trả về giá trị true nếu phần tử có chứa lớp được chỉ định, ngược lại trả về false.Phương thức hasClass()
thường được sử dụng trong các tình huống như:
Ví dụ thực tế:
$(".toggle-button").on("click", function() {
if ($(".menu").hasClass("open")) {
$(".menu").removeClass("open").slideUp();
} else {
$(".menu").addClass("open").slideDown();
}
});
Trong đoạn mã này, hasClass()
được sử dụng để kiểm tra xem menu có lớp "open"
hay không, từ đó xác định hành động mở hoặc đóng menu.
Ví dụ:
if ($("li").hasClass("selected")) {
console.log("Có ít nhất một mục danh sách chứa lớp 'selected'.");
}
Phương thức hasClass()
của jQuery giúp kiểm tra sự hiện diện của lớp CSS trong các phần tử một cách dễ dàng, nhanh chóng và hiệu quả. Nó đặc biệt hữu ích trong các ứng dụng web động, nơi mà lớp CSS đóng vai trò quan trọng trong việc quản lý trạng thái và giao diện của các phần tử.