บางครั้งนักพัฒนาซอฟต์แวร์ต้องทราบรหัสของปุ่มที่ผู้ใช้คลิกเพื่อตัดสินใจดำเนินการต่อไปบนหน้าเว็บ ดังที่คุณเห็นในบทความนี้ สามารถทำได้ผ่าน vanilla JavaScript และ jQuery เริ่มกันเลย:
ขั้นแรก เราจะสร้างหน้าเว็บ HTML แบบง่ายซึ่งมีปุ่มสองปุ่มอยู่ตรงกลางของหน้า:
DOCTYPE html >
< html >
< ร่างกาย >
< ศูนย์กลาง >
< div สไตล์ = 'ขอบบน: 50px;' >
< ชั่วโมง2 > คลิกปุ่มใดปุ่มหนึ่งต่อไปนี้ ชั่วโมง2 >
< ปุ่ม id = 'button_one' สไตล์ = 'ความกว้าง: 100px; ความสูง:40px; ระยะขอบขวา: 10px;' > 1 ปุ่ม >
< ปุ่ม id = 'button_two' สไตล์ = 'ความกว้าง: 100px; ความสูง:40px;' > สอง ปุ่ม >
div >
ศูนย์กลาง >
ร่างกาย >
html >
จะรับ ID ของปุ่มที่คลิกโดยใช้ JavaScript ได้อย่างไร
เราสามารถรับรหัสของปุ่มที่คลิกโดยใช้ JavaScript ได้หลายวิธี ในวิธีแรกของเรา เราจะรับ nodelist ของแท็กปุ่มทั้งหมดและจัดเก็บไว้ในตัวแปร จากนั้นเราจะวนซ้ำบน nodelist เพื่อรับ ID ของปุ่มที่ถูกคลิก:
< สคริปต์ >
ปุ่ม var = document.getElementsByTagName ( 'ปุ่ม' ) ;
สำหรับ ( อนุญาต ดัชนี = 0 ; ดัชนี < ปุ่ม.ความยาว; ดัชนี++ ) {
ปุ่ม [ ดัชนี ] .onclick = การทำงาน ( ) {
เตือน ( this.id ) ;
}
}
สคริปต์ >
นอกจากนี้เรายังสามารถตั้งค่าแต่ละปุ่มด้วย เมื่อคลิก เหตุการณ์เป็นรายบุคคล:
DOCTYPE html >
< html >
< ร่างกาย >
< ศูนย์กลาง >
< div สไตล์ = 'ขอบบน: 50px;' >
< ชั่วโมง2 > คลิกปุ่มใดปุ่มหนึ่งต่อไปนี้ ชั่วโมง2 >
< ปุ่ม id = 'button_one' สไตล์ = 'ความกว้าง: 100px; ความสูง:40px; ระยะขอบขวา: 10px;' เมื่อคลิก = 'alertId(this.id)' > 1 ปุ่ม >
< ปุ่ม id = 'button_two' สไตล์ = 'ความกว้าง: 100px; ความสูง:40px;' เมื่อคลิก = 'alertId(this.id)' > สอง ปุ่ม >
div >
ศูนย์กลาง >
ร่างกาย >
< สคริปต์ >
การทำงาน alertId ( id ) {
เตือน ( id )
}
สคริปต์ >
html >
วิธีรับ ID ของปุ่มที่คลิกโดยใช้ jQuery
jQuery ยังมีวิธีการต่าง ๆ มากมายที่สามารถใช้เพื่อรับ ID ของปุ่มที่คลิกได้ เราจะเริ่มต้นด้วย คลิก() เมธอดที่ใช้กับตัวเลือกและใช้ชื่อฟังก์ชันเป็นอาร์กิวเมนต์ที่เป็นทางเลือก:
DOCTYPE html >
< html >
< ร่างกาย >
< ศูนย์กลาง >
< div สไตล์ = 'ขอบบน: 50px;' >
< ชั่วโมง2 > คลิกปุ่มใดปุ่มหนึ่งต่อไปนี้ ชั่วโมง2 >
< ปุ่ม id = 'button_one' สไตล์ = 'ความกว้าง: 100px; ความสูง:40px; ระยะขอบขวา: 10px;' เมื่อคลิก = 'alertId(this.id)' > 1 ปุ่ม >
< ปุ่ม id = 'button_two' สไตล์ = 'ความกว้าง: 100px; ความสูง:40px;' เมื่อคลิก = 'alertId(this.id)' > สอง ปุ่ม >
div >
ศูนย์กลาง >
ร่างกาย >
< สคริปต์ >
$ ( 'ปุ่ม' ) .คลิก ( alertId ( $ ( นี้ ) .attr ( 'ไอดี' ) ) ) ;
การทำงาน alertId ( id ) {
เตือน ( id )
}
สคริปต์ >
html >
นอกจากนี้เรายังสามารถใช้ บน() วิธีการแนบตัวจัดการเหตุการณ์กับองค์ประกอบ ดิ บน() วิธีรับอย่างน้อยหนึ่งเหตุการณ์เป็นอาร์กิวเมนต์พร้อมกับอาร์กิวเมนต์ทางเลือกอื่น ๆ :
< html >
< ร่างกาย >
< ศูนย์กลาง >
< div สไตล์ = 'ขอบบน: 50px;' >
< ชั่วโมง2 > คลิกปุ่มใดปุ่มหนึ่งต่อไปนี้ ชั่วโมง2 >
< ปุ่ม id = 'button_one' สไตล์ = 'ความกว้าง: 100px; ความสูง:40px; ระยะขอบขวา: 10px;' เมื่อคลิก = 'alertId(this.id)' > 1 ปุ่ม >
< ปุ่ม id = 'button_two' สไตล์ = 'กว้าง: 100px; สูง:40px;' เมื่อคลิก = 'alertId(this.id)' > สอง ปุ่ม >
div >
ศูนย์กลาง >
ร่างกาย >
< สคริปต์ >
$ ( 'ปุ่ม' ) .บน ( 'คลิก' , alertId ( $ ( นี้ ) .attr ( 'ไอดี' ) ) ) ;
การทำงาน alertId ( id ) {
เตือน ( id )
}
สคริปต์ >
html >
บทสรุป
ID ของปุ่มที่คลิกสามารถเข้าถึงได้ผ่าน JavaScript ธรรมดาและ jQuery เราได้พูดคุยถึงวิธีการดังกล่าวสี่วิธีและให้รายละเอียดเชิงลึกและตัวอย่างที่เกี่ยวข้องในบทความนี้