Làm việc với phương thức toggleClass trong jQuery

Cũng tồn tại một phương thức hữu ích là toggleClass, phương thức này sẽ thêm lớp được chỉ định nếu nó chưa có, và loại bỏ nó nếu nó đã tồn tại. Nó có thể cần thiết để khi nhấp vào cùng một nút với một phần tử trên trang, những thay đổi theo chu kỳ sẽ xảy ra.

Hãy xem xét phương thức này qua một ví dụ. Giả sử chúng ta có các kiểu CSS sau:

.red {
	color: red;
}
	
.zzz {
	font-style: italic;
}

Đồng thời có một đoạn văn với lớp zzz:

<p class="zzz" id="test">text</p>
<button>click</button>

Ví dụ, hãy làm sao để khi nhấn vào nút lần đầu tiên, phần tử sẽ được thêm lớp red, lớp này thêm màu đỏ, còn khi nhấn lần thứ hai - lớp này sẽ bị loại bỏ và màu đỏ sẽ biến mất. Nếu lại nhấn vào nút - mọi thứ sẽ lặp lại.

Hãy thử chạy đoạn mã sau và tự mình kiểm chứng (lớp zzz làm nổi bật chữ nghiêng, để cho thấy rằng toggleClass sẽ không gây trở ngại cho hoạt động của các lớp khác):

$('button').click(function() {
	$('#test').toggleClass('red');
});

Sau lần nhấn đầu tiên, mã HTML sẽ trông như thế này (lớp red sẽ được thêm vào):

<p class="zzz red" id="test">text</p>
<button>click</button>

Còn sau lần nhấn thứ hai - như thế này (lớp red sẽ biến mất):

<p class="zzz" id="test">text</p>
<button>click</button>

Thêm lớp www cho tất cả các phần tử li, nếu chưa có, và xóa nếu đã tồn tại.