toggleClass() [ jQuery method]
สวัสดีจ้า วันนี้เราจะมาแนะนำ method ของ jQuery ที่ชื่อว่า toggleClass() เราจะมาดูกันว่า เจ้านี่ใช้ทำอะไรได้
toggleClass การทำงานของ method นี้คือ มันจะเพิ่มและลบ class จาก element ที่ถูกเลือก ชื่อก็บอกอยู่แล้วว่า toggle นั่นคือมีการสลับไปมา โดยการที่ มันจะเช็คในแต่ละ element ว่ามี class นั้นๆอยู่ไหม ถ้าไม่มีก็จะเพิ่ม class นั้นเข้าไป และ ถ้ามีก็จะลบ class นั้นๆออก โดยมี syntax ดังนี้
$(selector).toggleClass(classname,function(index,currentclass),switch)
classname : (จำเป็นต้องมี) ระบุชื่อของ class จำนวน1 หรือมากกว่าเพื่อที่จะใช้ในการเพิ่มและลบ โดยถ้าหากมีมากกว่า 1 class ให้แยกโดยการใช้การเว้นระยะห่าง
function(index,currentclass) : ( เป็นส่วนเสริม จะมีหรือไม่มีก็ได้) ระบุฟังก์ชันที่ return ชื่อของclass จำนวน1 หรือมากกว่า เพื่อที่จะใช้ในการเพิ่มและลบ
index — return ตัวระบุตำแหน่งของ element ใน set นั้น
currentclass — return ชื่อclassปัจจุบันของ element ที่ถูกเลือก
switch : ( เป็นส่วนเสริม จะมีหรือไม่มีก็ได้) ระบุค่าเป็นแบบ Boolean (true หรือ false) ซึ่งถ้าระบุเป็นค่านี้จะเลือกได้เพียงแค่ค่าเดียว โดยที่ true คือให้ทำการเพิ่มเท่านั้น และ false คือให้ทำการลบเท่านั้น
จากตัวอย่างคือเรามีข้อความธรรมดาๆอยู่ แล้วเราอยากจะเพิ่มความพิเศษให้กับข้อความโดยการใช้ method toggleClass() และเขียน CSS ให้กับ class นั้นๆ เมื่อมีการเรียกใช้ก็จะมีการเพิ่มและลบ class ดังกล่าว ทำให้แสดงผลดังที่แสดงข้างต้น
หวังว่าบทความนี้จะเป็นประโยชน์ต่อเพื่อนๆ ไม่มากก็น้อย แล้วพบกันในบทความถัดไปนะคะ :)
อ้างอิงและอ่านเพิ่มเติม
-https://www.thaicreate.com/jquery/jquery-attributes-toggleclass.html
-http://api.jquery.com/toggleclass/
-https://www.w3schools.com/jquery/html_toggleclass.asp
