การลบและการเพิ่มคลาสอย่างเข้มงวดด้วยเมธอด toggleClass ใน jQuery

นอกจากนี้ใน toggleClass คุณสามารถส่ง พารามิเตอร์สถานะ เช่น true หรือ false, จากนั้นคลาสจะถูกเพิ่มเท่านั้น หรือ ถูกลบออกเท่านั้น

สมมติว่าเรามีคลาส CSS ดังต่อไปนี้:

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

คลาส zzz ถูกนำไปใช้กับย่อหน้า:

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

ลองเพิ่มคลาส red เท่านั้น เมื่อคลิก:

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

อย่างที่คุณเห็น ไม่มีการเปลี่ยนแปลงใด ๆ เกิดขึ้นเมื่อคลิกซ้ำ

ทั้งสามเมธอดที่กล่าวถึงสำหรับทำงาน กับคลาส - addClass, removeClass, toggleClass ยังสามารถรับพารามิเตอร์เป็นหลายคลาสได้ และอนุญาตให้ใช้ฟังก์ชันกับแต่ละองค์ประกอบในชุดได้

แก้ไขโค้ดตัวอย่างที่ให้ไว้ข้างต้น - ในตอนแรก ให้เขียนคลาส red เพิ่มในแอตทริบิวต์ จากนั้น ทำให้คลาส red ถูกเอาออกเท่านั้น