לפעמים מפתח צריך לדעת את המזהה של הכפתור שהמשתמש לחץ עליו כדי להחליט על דרך פעולה נוספת בדף אינטרנט. כפי שתראה בכתבה זו, ניתן לעשות זאת גם באמצעות וניל JavaScript וגם באמצעות jQuery. אז בואו נתחיל:
ראשית, ניצור דף אינטרנט פשוט HTML בעל שני לחצנים במרכז העמוד:
DOCTYPE html >
< html >
< גוּף >
< מֶרְכָּז >
< div סִגְנוֹן = 'שוליים-עליון: 50px;' >
< h2 > לחץ על אחד מהלחצנים הבאים h2 >
< לַחְצָן תְעוּדַת זֶהוּת = 'כפתור_אחד' סִגְנוֹן = 'רוחב: 100px; גובה:40px; שוליים-ימין: 10px;' > 1 לַחְצָן >
< לַחְצָן תְעוּדַת זֶהוּת = 'כפתור_שניים' סִגְנוֹן = 'רוחב: 100px; גובה:40px;' > שתיים לַחְצָן >
div >
מֶרְכָּז >
גוּף >
html >
כיצד לקבל את המזהה של הכפתור שנלחץ באמצעות JavaScript?
אנו יכולים לקבל את המזהה של הכפתור שנלחץ באמצעות JavaScript בכמה שיטות שונות. בשיטה הראשונה שלנו, נקבל את רשימת הצמתים של כל תגי הכפתור ונשמור אותם בתוך משתנה. לאחר מכן נעבור על רשימת הצמתים כדי לקבל את המזהה של הכפתור שנלחץ עליו:
< תַסרִיט >
var buttons = document.getElementsByTagName ( 'לַחְצָן' ) ;
ל ( תן אינדקס = 0 ; אינדקס < buttons.length; אינדקס++ ) {
כפתורים [ אינדקס ] .onclick = פוּנקצִיָה ( ) {
עֵרָנִי ( this.id ) ;
}
}
תַסרִיט >
אנחנו יכולים גם להגדיר כל כפתור עם בלחיצה אירוע בנפרד:
DOCTYPE html >
< html >
< גוּף >
< מֶרְכָּז >
< div סִגְנוֹן = 'שוליים-עליון: 50px;' >
< h2 > לחץ על אחד מהלחצנים הבאים h2 >
< לַחְצָן תְעוּדַת זֶהוּת = 'כפתור_אחד' סִגְנוֹן = 'רוחב: 100px; גובה:40px; שוליים-ימין: 10px;' בלחיצה = 'alertId(this.id)' > 1 לַחְצָן >
< לַחְצָן תְעוּדַת זֶהוּת = 'כפתור_שניים' סִגְנוֹן = 'רוחב: 100px; גובה:40px;' בלחיצה = 'alertId(this.id)' > שתיים לַחְצָן >
div >
מֶרְכָּז >
גוּף >
< תַסרִיט >
פוּנקצִיָה alertId ( תְעוּדַת זֶהוּת ) {
עֵרָנִי ( תְעוּדַת זֶהוּת )
}
תַסרִיט >
html >
כיצד לקבל את המזהה של הכפתור שנלחץ באמצעות jQuery?
ל-jQuery יש גם כמה שיטות שונות שניתן להשתמש בהן כדי לקבל את המזהה של כפתור שנלחץ. נתחיל עם נְקִישָׁה() שיטה המוחלת על בורר ולוקחת שם פונקציה כארגומנט אופציונלי:
DOCTYPE html >
< html >
< גוּף >
< מֶרְכָּז >
< div סִגְנוֹן = 'שוליים-עליון: 50px;' >
< h2 > לחץ על אחד מהלחצנים הבאים h2 >
< לַחְצָן תְעוּדַת זֶהוּת = 'כפתור_אחד' סִגְנוֹן = 'רוחב: 100px; גובה:40px; שוליים-ימין: 10px;' בלחיצה = 'alertId(this.id)' > 1 לַחְצָן >
< לַחְצָן תְעוּדַת זֶהוּת = 'כפתור_שניים' סִגְנוֹן = 'רוחב: 100px; גובה:40px;' בלחיצה = 'alertId(this.id)' > שתיים לַחְצָן >
div >
מֶרְכָּז >
גוּף >
< תַסרִיט >
$ ( 'לַחְצָן' ) .נְקִישָׁה ( alertId ( $ ( זֶה ) .attr ( 'תְעוּדַת זֶהוּת' ) ) ) ;
פוּנקצִיָה alertId ( תְעוּדַת זֶהוּת ) {
עֵרָנִי ( תְעוּדַת זֶהוּת )
}
תַסרִיט >
html >
אנחנו יכולים גם להשתמש ב עַל() שיטה לצרף מטפלי אירועים לאלמנטים. ה עַל() השיטה לוקחת לפחות אירוע אחד כארגומנט יחד עם כמה ארגומנטים אופציונליים אחרים:
< html >
< גוּף >
< מֶרְכָּז >
< div סִגְנוֹן = 'שוליים-עליון: 50px;' >
< h2 > לחץ על אחד מהלחצנים הבאים h2 >
< לַחְצָן תְעוּדַת זֶהוּת = 'כפתור_אחד' סִגְנוֹן = 'רוחב: 100px; גובה:40px; שוליים-ימין: 10px;' בלחיצה = 'alertId(this.id)' > 1 לַחְצָן >
< לַחְצָן תְעוּדַת זֶהוּת = 'כפתור_שניים' סִגְנוֹן = 'רוחב: 100px; גובה:40px;' בלחיצה = 'alertId(this.id)' > שתיים לַחְצָן >
div >
מֶרְכָּז >
גוּף >
< תַסרִיט >
$ ( 'לַחְצָן' ) .עַל ( 'נְקִישָׁה' , alertId ( $ ( זֶה ) .attr ( 'תְעוּדַת זֶהוּת' ) ) ) ;
פוּנקצִיָה alertId ( תְעוּדַת זֶהוּת ) {
עֵרָנִי ( תְעוּדַת זֶהוּת )
}
תַסרִיט >
html >
סיכום
ניתן לגשת למזהה של כפתור שנלחץ גם דרך JavaScript רגיל וגם באמצעות jQuery. דנו בארבע שיטות כאלה ונתנו פירוט מעמיק ודוגמאות רלוונטיות בכתבה זו.