jQuery $(this) คืออะไร หมายความว่าอะไร

jQuery $(this) คือ การอ้างอิงถึงตัวเองที่กำลังถูกเรียกให้ทำงานอยู่ หมายความว่า สมมุติหน้าเว็บไซต์มีปุ่ม 3 ปุ่ม คือ A, B, C ถ้าผู้ใช้งานกดปุ่ม A ตัว $(this) ก็จะอ้างถึงปุ่ม A เท่านั้นไม่เกี่ยวกับปุ่มอื่นๆ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง jQuery $(this) คืออะไร หมายความว่าอะไร

<input type="button" value="A" class="btn">
<input type="button" value="B" class="btn">
<input type="button" value="C" class="btn">
<div id="result" style="margin-top:.2rem"></div>

<script>
   $(".btn").click(function(){
       let v = $(this).val();
       $("#result").html( "คุณกดปุ่ม "+v );
   });
</script>

ผลลัพธ์

คุณกดปุ่ม A

จากโค้ดตัวอย่าง มีการกำหนด class="btn" ให้กับทั้ง 3 ปุ่ม ภายใน jQuery กำหนด $(".btn").click นั้นหมายความว่าถ้ามีการกดคลิกที่ปุ่มใดปุ่มหนึ่งเกิดขึ้น เราจะไม่มีทางรู้เลยว่า ผู้ใช้งานกดปุ่มไหนเพราะทั้ง 3 ปุ่มใช้ class btn เหมือนกัน จึงต้องใช้คำสั่ง $(this) ซึ่งจะอ้างถึงตัวเองที่กำลังถูกเรียกให้ทำงานอยู่ จากตัวอย่างก็คือปุ่มที่กำลังถูกกดอยู่นั้นเอง ทำให้สามารถแยกได้ว่าปุ่ม หรือ elements ใดกำลังทำงาน และสามมารถเขียนโปรแกรมต่อได้อย่างถูกต้อง