jQuery การปรับปรุงตัวแปร - วิธี toggleClass()

ตัวอย่าง

เปลี่ยนชั้น "main" ขององค์ประกอบ <p> ทั้งหมดเพื่อเพิ่มหรือลบ

$("button").click(function(){
  $("p").toggleClass("main");
});

ทดลองด้วยตัวเอง

คำนำออกและใช้งาน

toggleClass() สามารถเปลี่ยนชั้นหนึ่งหรือหลายชั้นขององค์ประกอบที่เลือกได้

วิธีนี้ตรวจสอบชั้นที่กำหนดแต่ละองค์ประกอบ ถ้าไม่มีชั้นให้เพิ่มชั้น ถ้ามีชั้นให้ลบชั้น นี้เรียกว่าประสิทธิภาพเปลี่ยนชั้น

อย่างไรก็ตาม ด้วยการใช้ตัวแปร "switch" คุณสามารถกำหนดเพียงการลบหรือเพิ่มชั้น

ศัพท์

$(selector).toggleClass(class,switch)
ตัวแปร รายละเอียด
class

ข้อบังคับ (required)。กำหนดองค์ประกอบที่จะเพิ่มหรือลบชั้น

ถ้าต้องการกำหนดชั้นหลายชั้น ใช้ช่องว่าง (space) แยกชื่อชั้น

switch เลือกได้ (optional)。ค่าบูลเลียน (boolean)。กำหนดว่าเพิ่มหรือลบชั้น

ใช้ฟังก์ชันเพื่อเปลี่ยนชั้น

$(selector).toggleClass(function(index,class),switch)

ทดลองด้วยตัวเอง

ตัวแปร รายละเอียด
function(index,class)

ข้อบังคับ (required)。กำหนดฟังก์ชันที่จะเพิ่มหรือลบชั้นหนึ่งหรือหลายชั้นที่ต้องการ

  • index - สามารถเลือกได้ (optional)。ยอมรับตำแหน่ง index ของตัวเลือก
  • class - สามารถเลือกได้ (optional)。ยอมรับตัวเลือกซับตัวเลือกชั้นปัจจุบัน
switch เลือกได้。ค่าบูลเลียน (boolean)。กำหนดว่าเพิ่ม (true) หรือลบ (false) ชั้น (class)