วิธี toggleClass

วิธี toggleClass ทำสลับการเพิ่ม/ลบ คลาส CSS: ถ้าไม่มีจะเพิ่ม ถ้ามีจะลบ

ไวยากรณ์

คลาส CSS หนึ่งคลาส:

javascript$(ตัวเลือก).toggleClass(ชื่อคลาส);

เพื่อเพิ่มหรือลบคลาส CSS เท่านั้น ขึ้นอยู่กับ พารามิเตอร์ที่สองซึ่งรับค่า true หรือ false:

javascript$(ตัวเลือก).toggleClass(ชื่อคลาส CSS, สถานะ);

หลายคลาส CSS:

javascript$(ตัวเลือก).toggleClass(['คลาส1', 'คลาส2', 'คลาส3', '...']);

เพื่อเพิ่มหรือลบคลาส CSS เท่านั้น ขึ้นอยู่กับพารามิเตอร์ที่สอง:

javascript$(ตัวเลือก).toggleClass(['คลาส1', 'คลาส2', 'คลาส3', '...'], สถานะ');

การใช้งานฟังก์ชันกับแต่ละองค์ประกอบในชุด, สถานะอาจเป็น true หรือ false, และบอกวิธีการ - เพิ่มหรือลบคลาส CSS เท่านั้น:

javascript$(ตัวเลือก).toggleClass(function(หมายเลขในชุด, คลาสปัจจุบันขององค์ประกอบ, สถานะ), [สถานะ]);

ตัวอย่าง

ย่อหน้าของเรามีสองคลาสอยู่แล้ว มาลอง เพิ่มคลาส www ให้มัน:

html<p id="test" class="eee ggg">text</p>

javascript$('#test').toggleClass('www');

โค้ด HTML จะกลายเป็นแบบนี้:

html<p id="test" class="eee ggg www">text</p>

ตัวอย่าง

และตอนนี้คลาส www อยู่ในองค์ประกอบแล้ว - ลองลบมันดู:

html<p id="test" class="eee ggg www">text</p>

javascript$('#test').toggleClass('www');

โค้ด HTML จะกลายเป็นแบบนี้:

html<p id="test" class="eee ggg">text</p>

ดูเพิ่มเติม