jQuery toggleClass()เมธอด
ตัวอย่าง
สลับระหว่างการเพิ่มและลบชื่อคลาส "หลัก" สำหรับองค์ประกอบ <p> ทั้งหมด:
$("button").click(function(){
$("p").toggleClass("main");
});
ความหมายและการใช้งาน
วิธี toggleClass() จะสลับระหว่างการเพิ่มและลบชื่อคลาสตั้งแต่หนึ่งชื่อขึ้นไปจากองค์ประกอบที่เลือก
วิธีนี้จะตรวจสอบแต่ละองค์ประกอบสำหรับชื่อคลาสที่ระบุ ชื่อคลาสจะถูกเพิ่มถ้าหายไป และลบออกหากตั้งค่าไว้แล้ว - สิ่งนี้จะสร้างเอฟเฟกต์การสลับ
อย่างไรก็ตาม ด้วยการใช้พารามิเตอร์ "switch" คุณสามารถกำหนดให้ลบเท่านั้น หรือเพิ่มเฉพาะชื่อคลาสได้
ไวยากรณ์
$(selector).toggleClass(classname,function(index,currentclass),switch)
Parameter | Description |
---|---|
classname | Required. Specifies one or more class names to add or remove. To specify several classes, separate the class names with a space |
function(index,currentclass) | Optional. Specifies a function that returns one or more class names to add/remove
|
switch | Optional. A Boolean value specifying if the class should only be added (true), or only be removed (false) |
ลองด้วยตัวคุณเอง - ตัวอย่าง
วิธีการใช้เมธอด toggleClass() เพื่อสลับระหว่างการเพิ่มและการลบชื่อคลาส
ใช้ฟังก์ชันเพื่อระบุชื่อคลาสที่ควรสลับสำหรับองค์ประกอบที่เลือก
วิธีการใช้พารามิเตอร์สวิตช์เพื่อเพิ่มหรือลบเฉพาะชื่อคลาส