วิธี toggleClass
วิธี toggleClass ทำสลับการเพิ่ม/ลบ
คลาส CSS: ถ้าไม่มีจะเพิ่ม ถ้ามีจะลบ
ไวยากรณ์
คลาส CSS หนึ่งคลาส:
$(ตัวเลือก).toggleClass(ชื่อคลาส);
เพื่อเพิ่มหรือลบคลาส CSS เท่านั้น ขึ้นอยู่กับ
พารามิเตอร์ที่สองซึ่งรับค่า
true หรือ false:
$(ตัวเลือก).toggleClass(ชื่อคลาส CSS, สถานะ);
หลายคลาส CSS:
$(ตัวเลือก).toggleClass(['คลาส1', 'คลาส2', 'คลาส3', '...']);
เพื่อเพิ่มหรือลบคลาส CSS เท่านั้น ขึ้นอยู่กับพารามิเตอร์ที่สอง:
$(ตัวเลือก).toggleClass(['คลาส1', 'คลาส2', 'คลาส3', '...'], สถานะ');
การใช้งานฟังก์ชันกับแต่ละองค์ประกอบในชุด,
สถานะอาจเป็น true หรือ false,
และบอกวิธีการ - เพิ่มหรือลบคลาส CSS เท่านั้น:
$(ตัวเลือก).toggleClass(function(หมายเลขในชุด, คลาสปัจจุบันขององค์ประกอบ, สถานะ), [สถานะ]);
ตัวอย่าง
ย่อหน้าของเรามีสองคลาสอยู่แล้ว มาลอง
เพิ่มคลาส www ให้มัน:
<p id="test" class="eee ggg">text</p>
$('#test').toggleClass('www');
โค้ด HTML จะกลายเป็นแบบนี้:
<p id="test" class="eee ggg www">text</p>
ตัวอย่าง
และตอนนี้คลาส www อยู่ในองค์ประกอบแล้ว
- ลองลบมันดู:
<p id="test" class="eee ggg www">text</p>
$('#test').toggleClass('www');
โค้ด HTML จะกลายเป็นแบบนี้:
<p id="test" class="eee ggg">text</p>
ดูเพิ่มเติม
-
วิธี
addClass,removeClass,hasClass -
คุณสมบัติ JavaScript
classList,
ซึ่งสามารถใช้สลับการเพิ่ม/ลบคลาส ด้วย JavaScript ล้วนๆ
