โพสต์นี้จะอธิบายวิธีการตรวจสอบว่า event.target มีคลาสเฉพาะหรือไม่ใช้ JavaScript
วิธีตรวจสอบว่า event.target มีคลาสเฉพาะที่ใช้ JavaScript หรือไม่
หากต้องการตรวจสอบว่า event.target มีคลาสเฉพาะหรือไม่ ให้ใช้วิธีการที่กำหนดไว้ล่วงหน้าของ JavaScript ต่อไปนี้:
มาดูกันว่าเมธอดเหล่านี้ทำงานอย่างไรในการกำหนดคลาสใน event.target
วิธีที่ 1: ตรวจสอบว่า event.target มีคลาสเฉพาะโดยใช้วิธีการประกอบด้วย ()
ในการตรวจสอบว่าองค์ประกอบเป็นของคลาสใดคลาสหนึ่งหรือไม่ ให้ใช้ปุ่ม “ ประกอบด้วย() ” วิธีการของ “ รายการคลาส ' วัตถุ. วิธีการมี () ใช้เพื่อระบุว่ารายการที่ระบุมีอยู่ในคอลเล็กชันหรือไม่ ผลลัพธ์ของมัน “ จริง ” ถ้ามีรายการอยู่ มิฉะนั้น ให้ “ เท็จ '. เป็นวิธีที่มีประสิทธิภาพมากที่สุดในการกำหนดคลาสขององค์ประกอบ
ไวยากรณ์
ทำตามไวยากรณ์ที่กำหนดด้านล่างเพื่อพิจารณาว่า event.target มีคลาสเฉพาะหรือไม่โดยใช้วิธีการมี ():
เหตุการณ์. เป้า . รายการคลาส . ประกอบด้วย ( 'ชื่อชั้น' )ในไวยากรณ์ข้างต้น:
- “ เหตุการณ์.target ” เป็นเหตุการณ์ที่ถูกเรียกใช้ซึ่งจะถูกตรวจสอบว่ามีคลาสที่ระบุหรือไม่
- “ ชื่อชั้น ” ระบุชื่อของคลาส CSS ที่เป็นส่วนหนึ่งของเหตุการณ์ที่ถูกทริกเกอร์
ค่าส่งคืน
มันกลับมา “ จริง ” หากเหตุการณ์ที่ทริกเกอร์มีคลาสที่ระบุ มิฉะนั้นจะส่งกลับ “ เท็จ '.
ตัวอย่าง
ขั้นแรก สร้างสาม “ แผนก ” องค์ประกอบในไฟล์ HTML โดยใช้ HTML จัดรูปแบบองค์ประกอบโดยใช้สไตล์ CSS โดยสร้างคลาส CSS “ .div ” สำหรับองค์ประกอบ div ทั้งหมด: สร้าง “ .ศูนย์กลาง ” คลาสสำหรับตั้งค่าองค์ประกอบตรงกลางหน้า: ตอนนี้ สำหรับการจัดแต่งทรงผม แต่ละ div จะสร้างคลาส CSS สำหรับพวกเขา สำหรับ div แรก ให้ตั้งค่าสีพื้นหลัง “ สีแดง ' ใน ' div1สไตล์ ' ระดับ: สำหรับ div ที่สอง ให้ตั้งค่าสีพื้นหลัง “ หัวไชเท้าสีชมพู ' ใช้ ' rgba(194, 54, 77) ” รหัสใน “ div2สไตล์ ' ระดับ: กำหนดสีพื้นหลัง “ สีชมพู ” ของ div ที่สามโดยการสร้าง “ div3สไตล์ ' ระดับ: หลังจากเรียกใช้โค้ด HTML ด้านบน ผลลัพธ์จะมีลักษณะดังนี้: ตอนนี้ในไฟล์ JavaScript หรือ “ สคริปต์ แท็ก ” ใช้โค้ดด้านล่างเพื่อตรวจสอบว่า event.target มีคลาสเฉพาะหรือไม่: ในข้อมูลโค้ดด้านบน: เอาต์พุต GIF ด้านบนแสดงว่า div1 มี ' ศูนย์กลาง ” ชั้นตามที่แสดง “ จริง ” ในขณะที่ div2 และ div3 แสดง “ เท็จ ” ในช่องแจ้งเตือน ซึ่งหมายความว่าไม่มี “ ศูนย์กลาง ' ระดับ. วิธีอื่นที่กำหนดไว้ล่วงหน้าของ JavaScript เรียกว่า “ การแข่งขัน () ” สามารถใช้เพื่อตรวจสอบว่าคลาสใดคลาสหนึ่งเป็นขององค์ประกอบหรือเหตุการณ์ “ ชื่อชั้น ” เป็นพารามิเตอร์เดียวที่จำเป็นในการระบุว่าองค์ประกอบหรือเหตุการณ์เป้าหมายมีคลาสที่แน่นอนหรือไม่ ไวยากรณ์ ไวยากรณ์ที่ระบุด้านล่างใช้สำหรับการจับคู่ () วิธีการ: ในไวยากรณ์ข้างต้น ค่าส่งคืน หากเหตุการณ์เป้าหมายมีคลาส จะส่งกลับ “ จริง ' อื่น, ' เท็จ ” ถูกส่งกลับ ในไฟล์ JavaScript หรือแท็กสคริปต์ ใช้บรรทัดโค้ดด้านล่างเพื่อตรวจสอบว่า event.target มีคลาสเฉพาะหรือไม่โดยใช้ ' การแข่งขัน () ' กระบวนการ: ในบรรทัดโค้ดด้านบน: เอาต์พุต GIF ด้านบนแสดงให้เห็นว่าเฉพาะ div3 เท่านั้นที่มี ' div3สไตล์ ” ชั้นตามที่แสดง “ จริง '. ในการตรวจสอบว่าเหตุการณ์ที่ถูกทริกเกอร์มีคลาสที่ระบุหรือไม่ ให้ใช้ JavaScript “ ประกอบด้วย() ” วิธีการ หรือ “ การแข่งขัน () ' กระบวนการ. อย่างไรก็ตาม วิธีการมี () เป็นหนึ่งในวิธีที่มีประโยชน์ที่สุดที่ใช้ในการกำหนดคลาสขององค์ประกอบ ทั้งสองวิธีส่งคืน ' จริง ” หากเหตุการณ์ที่ทริกเกอร์มีคลาสอื่น “ เท็จ ” ถูกส่งกลับ โพสต์นี้อธิบายวิธีการตรวจสอบว่า event.target มีคลาสเฉพาะหรือไม่ใช้ JavaScript
< แผนก ระดับ = 'div div2Style' รหัส = 'div2' > สอง
< แผนก ระดับ = 'div div3Style' รหัส = 'div3' > 3
แผนก >
แผนก >
แผนก >
การขยายความ : 10px ;
ความสูง : 100px ;
ความกว้าง : 100px ;
ขอบ : 10px ;
}
ขอบ : อัตโนมัติ ;
}
{
พื้นหลัง - สี : สีแดง ;
}
{
พื้นหลัง - สี : rgb ( 194 , 54 , 77 ) ;
}
{
พื้นหลัง - สี : สีชมพู ;
}
โดยที่ hasClass = เหตุการณ์. เป้า . รายการคลาส . ประกอบด้วย ( 'ศูนย์กลาง' ) ;
เตือน ( ' div นี้มีคลาส 'center': ' + มีคลาส ) ;
} ) ;
วิธีที่ 2: ตรวจสอบว่า event.target มีคลาสเฉพาะโดยใช้การจับคู่ () วิธีการ
ตัวอย่าง
โดยที่ hasClass = เหตุการณ์. เป้า . การแข่งขัน ( '.div3Style' ) ;
เตือน ( 'คลาสของ div นี้ตรงกับคลาส 'div3Style': ' + มีคลาส ) ;
} ) ;
บทสรุป