การทำงานกับเมธอด toggleClass ใน jQuery

นอกจากนี้ยังมีเมธอดที่มีประโยชน์อีกอันหนึ่งคือ toggleClass, ซึ่งจะเพิ่มคลาสที่ระบุหากไม่มีอยู่ และลบออกหากมีอยู่ มันอาจจำเป็นเมื่อต้องการให้เกิดการเปลี่ยนแปลงเป็นคาบ กับองค์ประกอบบนหน้าเว็บ เมื่อคลิกที่ปุ่มเดียวกันซ้ำๆ

ลองพิจารณาเมธอดนี้ด้วยตัวอย่าง สมมติว่าเรามีสไตล์ CSS ดังต่อไปนี้:

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

และมีย่อหน้าที่มีคลาส zzz:

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

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

ลองรันโค้ดต่อไปนี้และดูผลลัพธ์ (คลาส zzz ทำให้เป็น ตัวเอียง, เพื่อแสดงว่า toggleClass จะไม่ รบกวนการทำงานของคลาสอื่น):

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

หลังจากการกดครั้งแรก โค้ด HTML จะมีลักษณะ ดังนี้ (เพิ่มคลาส red):

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

และหลังจากการกดครั้งที่สอง - จะเป็นดังนี้ (คลาส red จะหายไป):

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

เพิ่มคลาส www ให้กับทุก li ถ้า ยังไม่มี และลบออกถ้ามีอยู่แล้ว