بعض اوقات ایک ڈویلپر کو اس بٹن کی ID جاننی ہوتی ہے جسے صارف نے ویب پیج پر مزید کارروائی کا فیصلہ کرنے کے لیے کلک کیا ہے۔ جیسا کہ آپ اس تحریر میں دیکھیں گے، یہ ونیلا جاوا اسکرپٹ اور jQuery دونوں کے ذریعے کیا جا سکتا ہے۔ تو، آئیے شروع کریں:
سب سے پہلے، ہم ایک سادہ HTML ویب صفحہ بنائیں گے جس کے صفحہ کے بیچ میں دو بٹن ہوں گے۔
DOCTYPE html >
< html >
< جسم >
< مرکز >
< div انداز = 'مارجن ٹاپ: 50px؛' >
< h2 > درج ذیل بٹنوں میں سے ایک پر کلک کریں۔ h2 >
< بٹن آئی ڈی = 'بٹن_ایک' انداز = 'چوڑائی: 100px؛ اونچائی: 40px؛ مارجن-دائیں: 10px؛' > 1 بٹن >
< بٹن آئی ڈی = 'بٹن_دو' انداز = 'چوڑائی: 100px؛ اونچائی: 40px؛' > دو بٹن >
div >
مرکز >
جسم >
html >
جاوا اسکرپٹ کا استعمال کرتے ہوئے کلک کردہ بٹن کی ID کیسے حاصل کی جائے؟
ہم کئی مختلف طریقوں سے جاوا اسکرپٹ کا استعمال کرتے ہوئے کلک کردہ بٹن کی ID حاصل کر سکتے ہیں۔ ہمارے پہلے طریقہ میں، ہم تمام بٹن ٹیگز کا نوڈلسٹ حاصل کریں گے اور انہیں ایک متغیر کے اندر محفوظ کریں گے۔ پھر ہم اس بٹن کی ID حاصل کرنے کے لیے نوڈلسٹ پر اعادہ کریں گے جس پر کلک کیا گیا ہے:
< سکرپٹ >
var بٹن = document.getElementsByTagName ( 'بٹن' ) ;
کے لیے ( دو انڈیکس = 0 ; انڈیکس < buttons.length; انڈیکس++ ) {
بٹن [ انڈیکس ] .onclick = فنکشن ( ) {
الرٹ ( یہ آئی ڈی ) ;
}
}
سکرپٹ >
ہم ہر بٹن کے ساتھ سیٹ اپ بھی کر سکتے ہیں۔ کلک پر انفرادی طور پر واقعہ:
DOCTYPE html >
< html >
< جسم >
< مرکز >
< div انداز = 'مارجن ٹاپ: 50px؛' >
< h2 > درج ذیل بٹنوں میں سے ایک پر کلک کریں۔ h2 >
< بٹن آئی ڈی = 'بٹن_ایک' انداز = 'چوڑائی: 100px؛ اونچائی: 40px؛ مارجن-دائیں: 10px؛' کلک پر = 'alertId(this.id)' > 1 بٹن >
< بٹن آئی ڈی = 'بٹن_دو' انداز = 'چوڑائی: 100px؛ اونچائی: 40px؛' کلک پر = 'alertId(this.id)' > دو بٹن >
div >
مرکز >
جسم >
< سکرپٹ >
فنکشن الرٹ آئی ڈی ( آئی ڈی ) {
الرٹ ( آئی ڈی )
}
سکرپٹ >
html >
jQuery کا استعمال کرتے ہوئے کلک کردہ بٹن کی ID کیسے حاصل کی جائے؟
jQuery میں کئی مختلف طریقے بھی ہیں جن کا استعمال کلک کردہ بٹن کی ID حاصل کرنے کے لیے کیا جا سکتا ہے۔ ہم کے ساتھ شروع کریں گے کلک کریں() وہ طریقہ جو سلیکٹر پر لاگو ہوتا ہے اور ایک فنکشن کا نام بطور اختیاری دلیل لیتا ہے:
DOCTYPE html >
< html >
< جسم >
< مرکز >
< div انداز = 'مارجن ٹاپ: 50px؛' >
< h2 > درج ذیل بٹنوں میں سے ایک پر کلک کریں۔ h2 >
< بٹن آئی ڈی = 'بٹن_ایک' انداز = 'چوڑائی: 100px؛ اونچائی: 40px؛ مارجن-دائیں: 10px؛' کلک پر = 'alertId(this.id)' > 1 بٹن >
< بٹن آئی ڈی = 'بٹن_دو' انداز = 'چوڑائی: 100px؛ اونچائی: 40px؛' کلک پر = 'alertId(this.id)' > دو بٹن >
div >
مرکز >
جسم >
< سکرپٹ >
$ ( 'بٹن' ) کلک کریں۔ ( الرٹ آئی ڈی ( $ ( یہ ) .attr ( 'id' ) ) ) ;
فنکشن الرٹ آئی ڈی ( آئی ڈی ) {
الرٹ ( آئی ڈی )
}
سکرپٹ >
html >
ہم بھی استعمال کر سکتے ہیں پر() ایونٹ ہینڈلرز کو عناصر سے منسلک کرنے کا طریقہ۔ دی پر() طریقہ کچھ دیگر اختیاری دلائل کے ساتھ کم از کم ایک واقعہ کو بطور دلیل لیتا ہے:
< html >
< جسم >
< مرکز >
< div انداز = 'مارجن ٹاپ: 50px؛' >
< h2 > درج ذیل بٹنوں میں سے ایک پر کلک کریں۔ h2 >
< بٹن آئی ڈی = 'بٹن_ایک' انداز = 'چوڑائی: 100px؛ اونچائی: 40px؛ مارجن-دائیں: 10px؛' کلک پر = 'alertId(this.id)' > 1 بٹن >
< بٹن آئی ڈی = 'بٹن_دو' انداز = 'چوڑائی: 100px؛ اونچائی: 40px؛' کلک پر = 'alertId(this.id)' > دو بٹن >
div >
مرکز >
جسم >
< سکرپٹ >
$ ( 'بٹن' ) پر ( 'کلک' ، الرٹ آئی ڈی ( $ ( یہ ) .attr ( 'id' ) ) ) ;
فنکشن الرٹ آئی ڈی ( آئی ڈی ) {
الرٹ ( آئی ڈی )
}
سکرپٹ >
html >
نتیجہ
کلک کردہ بٹن کی ID کو سادہ JavaScript اور jQuery دونوں کے ذریعے حاصل کیا جا سکتا ہے۔ ہم نے اس طرح کے چار طریقوں پر تبادلہ خیال کیا اور اس تحریر میں گہرائی سے تفصیل اور متعلقہ مثالیں دیں۔