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

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

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

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

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

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

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

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

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

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