சில நேரங்களில் ஒரு டெவலப்பர், வலைப்பக்கத்தில் மேலும் நடவடிக்கை எடுக்க, பயனர் கிளிக் செய்த பொத்தானின் ஐடியை அறிந்திருக்க வேண்டும். இந்த பதிவில் நீங்கள் பார்ப்பது போல், வெண்ணிலா ஜாவாஸ்கிரிப்ட் மற்றும் jQuery இரண்டிலும் இதைச் செய்யலாம். எனவே, தொடங்குவோம்:
முதலில், பக்கத்தின் மையத்தில் இரண்டு பொத்தான்களைக் கொண்ட எளிய HTML வலைப்பக்கத்தை உருவாக்குவோம்:
DOCTYPE html >
< html >
< உடல் >
< மையம் >
< div பாணி = 'விளிம்பு மேல்: 50px;' >
< h2 > பின்வரும் பொத்தான்களில் ஒன்றைக் கிளிக் செய்யவும் h2 >
< பொத்தானை ஐடி = 'பொத்தான்_ஒன்' பாணி = 'அகலம்: 100px; உயரம்: 40px; விளிம்பு-வலது: 10px;' > 1 பொத்தானை >
< பொத்தானை ஐடி = 'பொத்தான்_இரண்டு' பாணி = 'அகலம்: 100px; உயரம்: 40px;' > இரண்டு பொத்தானை >
div >
மையம் >
உடல் >
html >
ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி கிளிக் செய்யப்பட்ட பட்டனின் ஐடியைப் பெறுவது எப்படி?
ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி பல்வேறு முறைகளில் கிளிக் செய்யப்பட்ட பொத்தானின் ஐடியைப் பெறலாம். எங்கள் முதல் முறையில், அனைத்து பொத்தான் குறிச்சொற்களின் முனைப்பட்டியலைப் பெற்று, அவற்றை ஒரு மாறிக்குள் சேமிப்போம். கிளிக் செய்யப்பட்ட பொத்தானின் ஐடியைப் பெற, நோட்லிஸ்ட்டில் மீண்டும் மீண்டும் செய்வோம்:
< கையால் எழுதப்பட்ட தாள் >
var பொத்தான்கள் = document.getElementsByTagName ( 'பொத்தானை' ) ;
க்கான ( அனுமதிக்க குறியீட்டு = 0 ; குறியீட்டு < பொத்தான்கள்.நீளம்; குறியீட்டு++ ) {
பொத்தான்கள் [ குறியீட்டு ] .onclick = செயல்பாடு ( ) {
எச்சரிக்கை ( இந்த.ஐடி ) ;
}
}
கையால் எழுதப்பட்ட தாள் >
நாம் ஒவ்வொரு பொத்தானையும் அமைக்கலாம் கிளிக் செய்யவும் தனிப்பட்ட நிகழ்வு:
DOCTYPE html >
< html >
< உடல் >
< மையம் >
< div பாணி = 'விளிம்பு மேல்: 50px;' >
< h2 > பின்வரும் பொத்தான்களில் ஒன்றைக் கிளிக் செய்யவும் h2 >
< பொத்தானை ஐடி = 'பொத்தான்_ஒன்' பாணி = 'அகலம்: 100px; உயரம்: 40px; விளிம்பு-வலது: 10px;' கிளிக் செய்யவும் = 'alertId(this.id)' > 1 பொத்தானை >
< பொத்தானை ஐடி = 'பொத்தான்_இரண்டு' பாணி = 'அகலம்: 100px; உயரம்: 40px;' கிளிக் செய்யவும் = 'alertId(this.id)' > இரண்டு பொத்தானை >
div >
மையம் >
உடல் >
< கையால் எழுதப்பட்ட தாள் >
செயல்பாடு எச்சரிக்கை ஐடி ( ஐடி ) {
எச்சரிக்கை ( ஐடி )
}
கையால் எழுதப்பட்ட தாள் >
html >
jQuery ஐப் பயன்படுத்தி கிளிக் செய்யப்பட்ட பட்டனின் ஐடியை எவ்வாறு பெறுவது?
jQuery பல வேறுபட்ட முறைகளையும் கொண்டுள்ளது, இது கிளிக் செய்யப்பட்ட பொத்தானின் ஐடியைப் பெற பயன்படுகிறது. உடன் தொடங்குவோம் கிளிக்() ஒரு தேர்வியில் பயன்படுத்தப்படும் முறை மற்றும் ஒரு செயல்பாட்டு பெயரை விருப்ப வாதமாக எடுத்துக்கொள்கிறது:
DOCTYPE html >
< html >
< உடல் >
< மையம் >
< div பாணி = 'விளிம்பு மேல்: 50px;' >
< h2 > பின்வரும் பொத்தான்களில் ஒன்றைக் கிளிக் செய்யவும் h2 >
< பொத்தானை ஐடி = 'பொத்தான்_ஒன்' பாணி = 'அகலம்: 100px; உயரம்: 40px; விளிம்பு-வலது: 10px;' கிளிக் செய்யவும் = 'alertId(this.id)' > 1 பொத்தானை >
< பொத்தானை ஐடி = 'பொத்தான்_இரண்டு' பாணி = 'அகலம்: 100px; உயரம்: 40px;' கிளிக் செய்யவும் = 'alertId(this.id)' > இரண்டு பொத்தானை >
div >
மையம் >
உடல் >
< கையால் எழுதப்பட்ட தாள் >
$ ( 'பொத்தானை' ) .கிளிக் செய்யவும் ( எச்சரிக்கை ஐடி ( $ ( இது ) .attr ( 'ஐடி' ) ) ) ;
செயல்பாடு எச்சரிக்கை ஐடி ( ஐடி ) {
எச்சரிக்கை ( ஐடி )
}
கையால் எழுதப்பட்ட தாள் >
html >
நாமும் பயன்படுத்தலாம் அன்று() நிகழ்வு ஹேண்ட்லர்களை உறுப்புகளுடன் இணைக்கும் முறை. தி அன்று() முறை குறைந்தபட்சம் ஒரு நிகழ்வை ஒரு வாதமாக வேறு சில விருப்ப வாதங்களுடன் எடுத்துக்கொள்கிறது:
< html >
< உடல் >
< மையம் >
< div பாணி = 'விளிம்பு மேல்: 50px;' >
< h2 > பின்வரும் பொத்தான்களில் ஒன்றைக் கிளிக் செய்யவும் h2 >
< பொத்தானை ஐடி = 'பொத்தான்_ஒன்' பாணி = 'அகலம்: 100px; உயரம்: 40px; விளிம்பு-வலது: 10px;' கிளிக் செய்யவும் = 'alertId(this.id)' > 1 பொத்தானை >
< பொத்தானை ஐடி = 'பொத்தான்_இரண்டு' பாணி = 'அகலம்: 100px; உயரம்:40px;' கிளிக் செய்யவும் = 'alertId(this.id)' > இரண்டு பொத்தானை >
div >
மையம் >
உடல் >
< கையால் எழுதப்பட்ட தாள் >
$ ( 'பொத்தானை' ) .மீது ( 'கிளிக்' , எச்சரிக்கை ஐடி ( $ ( இது ) .attr ( 'ஐடி' ) ) ) ;
செயல்பாடு எச்சரிக்கை ஐடி ( ஐடி ) {
எச்சரிக்கை ( ஐடி )
}
கையால் எழுதப்பட்ட தாள் >
html >
முடிவுரை
கிளிக் செய்யப்பட்ட பொத்தானின் ஐடியை ஜாவாஸ்கிரிப்ட் மற்றும் jQuery இரண்டிலும் அணுகலாம். அத்தகைய நான்கு முறைகளை நாங்கள் விவாதித்தோம் மற்றும் இந்த பதிவில் ஆழமான விவரங்கள் மற்றும் பொருத்தமான உதாரணங்களை வழங்கினோம்.