jQuery addClass(): คู่มือการเพิ่ม Class ให้ Element

jQuery addClass() ทำงานอย่างไร?

เมธอด addClass() ของ jQuery ให้นักพัฒนาสามารถเปลี่ยนแปลง element ได้ในลักษณะกว้างขึ้น ตามชื่อเมธอด เราสามารถเพิ่ม attribute class ให้กับ element ที่เลือกได้ ทำไมต้องทำอย่างนี้? สมมติมีหน้าเว็บที่มี element ต่างๆ เช่น title, paragraph, และปุ่ม พร้อม stylesheet ที่ใช้ class name ในการจัดสไตล์ เมื่อคลิกปุ่ม เนื้อหาที่มีอยู่สามารถเปลี่ยนสไตล์หรือลักษณะได้

เราสามารถใช้ addClass() แทรก style attribute ใหม่ให้เนื้อหาหลังคลิกปุ่ม ทำให้เปลี่ยนสไตล์เนื้อหาเดิมได้ด้วยโค้ดเพียงบรรทัดเดียว ช่วยให้นักพัฒนาคิดถึงการจัดการ element ในรูปแบบ styled fashion

ตัวอย่างการใช้งาน addClass()

ในตัวอย่างนี้ เราจะเปลี่ยน class attribute ของ object เมื่อปุ่มถูกคลิก ก่อนอื่นดู HTML พื้นฐาน:

<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
    p { margin: 8px; font-size: 16px; }
    .selected { color: blue; }
    .highlight { background: yellow; }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
</body>

เราใช้ <style> สำหรับสไตล์พื้นฐานของ <p> และ include jQuery API ใน <head> ใน <body> มีคำว่า "Hello", "and", "Goodbye" ห่อหุ้มใน <p> แยกกัน 3 ตัว ปัจจุบันไม่มีสไตล์ใด render เพราะไม่มี class ผูกกับ <p> แทนที่จะเขียน class ใน HTML เอง เราใช้ addClass() แทรก class attribute เข้าไปใน <p> element ได้

เพิ่ม Class เดียว

<script>
$(document).ready(() => {
  $('p').addClass('selected')
})
</script>

โค้ดนี้ select ทุก <p> และเพิ่ม class 'selected' ทำให้ทุก <p> สีฟ้า

เพิ่มหลาย Class พร้อมกัน

addClass() รับหลาย class ได้ในอาร์กิวเมนต์เดียว โดยคั่นด้วย space:

<script>
$(document).ready(() => {
  $('p').addClass('selected highlight')
})
</script>

ผลลัพธ์: <p> จะมีทั้งสีฟ้าและพื้นหลังสีเหลือง

ใช้ addClass() กับ Event Click

ตอนนี้เพิ่มปุ่มเข้าไปในตัวอย่างเดิม:

<body>
  <p><strong>jQuery addClass Example</strong></p>
  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
  <button> Click to add class </button>
</body>

ปุ่มยังไม่ทำอะไร เราจะเปลี่ยนแค่ element เดียวเมื่อคลิก โดยใช้ click() method ร่วมกับ addClass():

<script>
$('button').click(() => {
  $('p').last().addClass('selected')
})
</script>

ใน callback function เรา select <p> elements และเรียก last() หาตัวสุดท้าย แล้วเพิ่ม class 'selected' คาดว่า <p> ตัวสุดท้าย ("Goodbye") จะสีฟ้าเมื่อคลิกปุ่ม

สรุป

วันนี้เราเรียนรู้ jQuery addClass() และวิธีการทำงาน มันยืดหยุ่นมาก สามารถเปลี่ยนหลาย class attribute พร้อมกันได้ ตัวอย่างข้างต้นเป็นการแสดงพื้นฐาน ลองทดลองต่อเองเพื่อหาวิธีใช้ addClass() ให้เหมาะกับ web app ของคุณ