.toggleClass()

Định nghĩa và sử dụng

  • .toggleClass(): Thêm hoặc loại bỏ một hoặc nhiều class của thành phần.
  • Việc thêm hoặc loại bỏ class được luân phiên nhau giữa các lần action (VD action Click).

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.0

.toggleClass('tên class')

$('p').toggleClass('test');
  • Đã được thêm vào từ phiên bản 1.3

.toggleClass('tên class',switch)

$('p').toggleClass('test',count % 3 == 0);
  • Đã được thêm vào từ phiên bản 1.4

.toggleClass([switch])

.toggleClass(function(){})

$('p').toggleClass(function(){...});

.toggleClass(Tên class)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
p { cursor: pointer; }
.test { color: blue; }
</style>
<script>
$(function(){
    $('p').click(function(){
        $(this).toggleClass('test');
    })
});
</script>
</head>

<body>
<p>Thành phần p</p>
<p class="test">Thành phần p</p>
<p>Thành phần p</p>
<p>Thành phần p</p>
</body>
</html>

Hiển thị trình duyệt:

Click nhiều lần vào các thành phần p, ta sẽ thấy class thay đổi luân phiên giữa các lần click.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p>Thành phần p</p>
<p class="test">Thành phần p</p>
<p>Thành phần p</p>
<p>Thành phần p</p>

<p>Thành phần p</p>
<p>Thành phần p</p>
<p>Thành phần p</p>
<p class="test">Thành phần p</p>

.toggleClass(switch)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
p { cursor: pointer; }
.test { color: blue; }
</style>
<script>
$(function(){
    var count = 0;
    $('p').click(function(){
        $(this).toggleClass('test', count++ % 3 == 0);
    })
});
</script>
</head>

<body>
<p>Thành phần p</p>
<p class="test">Thành phần p</p>
<p>Thành phần p</p>
<p>Thành phần p</p>
</body>
</html>

Hiển thị trình duyệt:

Với cách sử dụng bên trên, các lần thay đổi luân phiên sẽ là 3 lần click.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p>Thành phần p</p>
<p class="test">Thành phần p</p>
<p>Thành phần p</p>
<p>Thành phần p</p>

<p>Thành phần p</p>
<p>Thành phần p</p>
<p>Thành phần p</p>
<p class="test">Thành phần p</p>

.toggleClass(function(){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
p { cursor: pointer; }
.blue { color: blue; }
.yellow { color: yellow; }
</style>
<script>
$(function(){
    $('button').click(function(){
        $('p').toggleClass(function(){
             if ($(this).parent().is('.test')) {
                 return 'yellow';
             } else {
                 return 'blue';
             }
        });
    })
});
</script>
</head>

<body>
<p>Thành phần p</p>
<div class="test"><p>Thành phần p</p></div>
<p>Thành phần p</p>
<p>Thành phần p</p>
<button>Click</button>
</body>
</html>

Hiển thị trình duyệt:

Click luân phiên vào button để thấy hiệu ứng.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p>Thành phần p</p>
<div class="test"><p>Thành phần p</p></div>
<p>Thành phần p</p>
<p>Thành phần p</p>
<button>Click</button>

<p class="blue">Thành phần p</p>
<div class="test"><p class="yellow">Thành phần p</p></div>
<p class="blue">Thành phần p</p>
<p class="blue">Thành phần p</p>
<button>Click</button>