في بعض الأحيان ، يتعين على المطور معرفة معرف الزر الذي نقر عليه المستخدم لتحديد مسار الإجراء الإضافي على صفحة الويب. كما سترى في هذه الكتابة ، يمكن القيام بذلك من خلال كل من Vanilla JavaScript و jQuery. فلنبدأ إذن:
أولاً ، سننشئ صفحة ويب HTML بسيطة تحتوي على زرين في وسط الصفحة:
DOCTYPE html >
< لغة البرمجة >
< هيئة >
< المركز >
< شعبة نمط = 'margin-top: 50px؛' >
< h2 > انقر فوق أحد الأزرار التالية h2 >
< زر هوية شخصية = 'button_one' نمط = 'العرض: 100 بكسل ؛ الارتفاع: 40 بكسل ؛ الهامش الأيمن: 10 بكسل ؛' > 1 زر >
< زر هوية شخصية = 'button_two' نمط = 'العرض: 100 بكسل ؛ الارتفاع: 40 بكسل ؛' > اثنين زر >
شعبة >
المركز >
هيئة >
لغة البرمجة >
كيفية الحصول على معرف الزر الذي تم النقر عليه باستخدام JavaScript؟
يمكننا الحصول على معرف الزر الذي تم النقر عليه باستخدام JavaScript بعدة طرق مختلفة. في طريقتنا الأولى ، سنحصل على قائمة nodelist لجميع علامات الأزرار ونخزنها داخل متغير. ثم سنقوم بالتكرار فوق قائمة nodelist للحصول على معرف الزر الذي تم النقر فوقه:
< النصي >
أزرار var = document.getElementsByTagName ( 'زر' ) ؛
إلى عن على ( يترك الفهرس = 0 ؛ فهرس < الأزرار. فهرس ++ ) {
أزرار [ فهرس ] .onclick = وظيفة ( ) {
إنذار ( هذه بطاقة الهوية ) ؛
}
}
النصي >
يمكننا أيضًا إعداد كل زر باستخدام عند النقر حدث فردي:
DOCTYPE html >
< لغة البرمجة >
< هيئة >
< المركز >
< شعبة نمط = 'margin-top: 50px؛' >
< h2 > انقر فوق أحد الأزرار التالية h2 >
< زر هوية شخصية = 'button_one' نمط = 'العرض: 100 بكسل ؛ الارتفاع: 40 بكسل ؛ الهامش الأيمن: 10 بكسل ؛' عند النقر = 'alertId (this.id)' > 1 زر >
< زر هوية شخصية = 'button_two' نمط = 'العرض: 100 بكسل ؛ الارتفاع: 40 بكسل ؛' عند النقر = 'alertId (this.id)' > اثنين زر >
شعبة >
المركز >
هيئة >
< النصي >
وظيفة تنبيه ( هوية شخصية ) {
إنذار ( هوية شخصية )
}
النصي >
لغة البرمجة >
كيفية الحصول على معرف الزر الذي تم النقر عليه باستخدام jQuery؟
يحتوي jQuery أيضًا على عدة طرق مختلفة يمكن استخدامها للحصول على معرف الزر الذي يتم النقر عليه. سنبدأ بـ انقر() يتم تطبيقه على محدد ويأخذ اسم دالة كوسيطة اختيارية:
DOCTYPE html >
< لغة البرمجة >
< هيئة >
< المركز >
< شعبة نمط = 'margin-top: 50px؛' >
< h2 > انقر فوق أحد الأزرار التالية h2 >
< زر هوية شخصية = 'button_one' نمط = 'العرض: 100 بكسل ؛ الارتفاع: 40 بكسل ؛ الهامش الأيمن: 10 بكسل ؛' عند النقر = 'alertId (this.id)' > 1 زر >
< زر هوية شخصية = 'button_two' نمط = 'العرض: 100 بكسل ؛ الارتفاع: 40 بكسل ؛' عند النقر = 'alertId (this.id)' > اثنين زر >
شعبة >
المركز >
هيئة >
< النصي >
$ ( 'زر' ) .انقر ( تنبيه ( $ ( هذه ) .attr ( 'هوية شخصية' ) ) ) ؛
وظيفة تنبيه ( هوية شخصية ) {
إنذار ( هوية شخصية )
}
النصي >
لغة البرمجة >
يمكننا أيضًا استخدام على() طريقة لإرفاق معالجات الأحداث بالعناصر. ال على() يأخذ التابع حدثًا واحدًا على الأقل كوسيطة مع بعض الوسائط الاختيارية الأخرى:
< لغة البرمجة >
< هيئة >
< المركز >
< شعبة نمط = 'margin-top: 50px؛' >
< h2 > انقر فوق أحد الأزرار التالية h2 >
< زر هوية شخصية = 'button_one' نمط = 'العرض: 100 بكسل ؛ الارتفاع: 40 بكسل ؛ الهامش الأيمن: 10 بكسل ؛' عند النقر = 'alertId (this.id)' > 1 زر >
< زر هوية شخصية = 'button_two' نمط = 'العرض: 100 بكسل ؛ الارتفاع: 40 بكسل ؛' عند النقر = 'alertId (this.id)' > اثنين زر >
شعبة >
المركز >
هيئة >
< النصي >
$ ( 'زر' ) .على ( 'انقر' ، alertId ( $ ( هذه ) .attr ( 'هوية شخصية' ) ) ) ؛
وظيفة تنبيه ( هوية شخصية ) {
إنذار ( هوية شخصية )
}
النصي >
لغة البرمجة >
استنتاج
يمكن الوصول إلى معرف الزر الذي تم النقر عليه من خلال كل من JavaScript و jQuery. ناقشنا أربع طرق من هذا القبيل وقدمنا تفاصيل متعمقة وأمثلة ذات صلة في هذه الكتابة.