jQuery toggleClass()เมธอด

❮ วิธีการ jQuery HTML/CSS

ตัวอย่าง

สลับระหว่างการเพิ่มและลบชื่อคลาส "หลัก" สำหรับองค์ประกอบ <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
  • index - Returns the index position of the element in the set
  • currentclass - Returns current class name of selected elements
switch Optional. A Boolean value specifying if the class should only be added (true), or only be removed (false)

ลองด้วยตัวคุณเอง - ตัวอย่าง


วิธีการใช้เมธอด toggleClass() เพื่อสลับระหว่างการเพิ่มและการลบชื่อคลาส


ใช้ฟังก์ชันเพื่อระบุชื่อคลาสที่ควรสลับสำหรับองค์ประกอบที่เลือก


วิธีการใช้พารามิเตอร์สวิตช์เพื่อเพิ่มหรือลบเฉพาะชื่อคลาส


❮ วิธีการ jQuery HTML/CSS