.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

$('p').toggleClass('test');

.toggleClass(function(){})

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

Bài học chỉ muốn cho bạn hiểu cách sử dụng .toggleClass, muốn biết chi tiết hơn, bạn có thể xem chi tiết thêm tại phần tham khảo.

.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:

Làm thử!

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(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:

Làm thử!

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>

.toggle()

.hide()