Phương thức toggleClass() trong jQuery

1) Phương thức toggleClass() trong jQuery

- Phương thức toggleClass() dùng để thực hiện luân phiên giữa việc thêm/xóa tên lớp khỏi giá trị thuộc tính class của phần tử.

2) Cách sử dụng phương thức toggleClass() trong jQuery

- Để sử dụng phương thức toggleClass(), chúng ta có hai cú pháp cơ bản như sau:

Cú pháp 1:

- Cú pháp này thường được sử dụng trong trường hợp bộ chọn chỉ tìm được một phần tử trùng khớp hoặc bạn muốn tất cả các phần tử trùng khớp đều được thiết lập chung một giá trị.

$(selector).toggleClass(classname,switch);

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong cú pháp trên:

Cú pháp 2:

- Cú pháp này thường được sử dụng trong trường hợp bộ chọn tìm được nhiều phần tử trùng khớp và bạn muốn mỗi phần tử trùng khớp được thiết lập một giá trị riêng.

$(selector).toggleClass(function(index,currentclass){
    return classname;
},switch);

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong cú pháp trên:

3) Một số ví dụ

<script>
    $(document).ready(function(){
       $("button").click(function(){
            $("p").toggleClass("font border");
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("#add").click(function(){
            $("p").toggleClass("info",true);
        });
        $("#delete").click(function(){
            $("p").toggleClass("info",false);
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").toggleClass(function(a){
                if(a==0){return "font";}
                if(a==1){return "font border";}
                if(a==2){return "border";}
            });
        });
    });
</script>