వెబ్‌పేజీలో తదుపరి చర్యను నిర్ణయించడానికి వినియోగదారు క్లిక్ చేసిన బటన్ యొక్క IDని కొన్నిసార్లు డెవలపర్ తెలుసుకోవాలి. మీరు ఈ వ్రాతలో చూస్తారు, ఇది వనిల్లా జావాస్క్రిప్ట్ మరియు j క్వెరీ రెండింటి ద్వారా చేయవచ్చు. కాబట్టి, ప్రారంభిద్దాం:
ముందుగా, మేము పేజీ మధ్యలో రెండు బటన్‌లను కలిగి ఉన్న సాధారణ HTML వెబ్‌పేజీని సృష్టిస్తాము:
DOCTYPE html >
< html >
< శరీరం >
< కేంద్రం >
< div శైలి = 'మార్జిన్-టాప్: 50px;' >
< h2 > కింది బటన్లలో ఒకదానిని క్లిక్ చేయండి h2 >
< బటన్ id = 'బటన్_వన్' శైలి = 'వెడల్పు: 100px; ఎత్తు:40px; మార్జిన్-కుడి: 10px;' > 1 బటన్ >
< బటన్ id = 'బటన్_రెండు' శైలి = 'వెడల్పు: 100px; ఎత్తు:40px;' > రెండు బటన్ >
div >
కేంద్రం >
శరీరం >
html >
జావాస్క్రిప్ట్ ఉపయోగించి క్లిక్ చేసిన బటన్ యొక్క IDని ఎలా పొందాలి?
మేము JavaScriptను ఉపయోగించి అనేక విభిన్న పద్ధతులలో క్లిక్ చేసిన బటన్ యొక్క IDని పొందవచ్చు. మా మొదటి పద్ధతిలో, మేము అన్ని బటన్ ట్యాగ్‌ల నోడెలిస్ట్‌ని పొందుతాము మరియు వాటిని వేరియబుల్ లోపల నిల్వ చేస్తాము. ఆపై మేము క్లిక్ చేసిన బటన్ యొక్క IDని పొందడానికి నోడెలిస్ట్‌పై మళ్ళిస్తాము:
< స్క్రిప్ట్ >
var buttons = document.getElementsByTagName ( 'బటన్' ) ;
కోసం ( వీలు సూచిక = 0 ; సూచిక < బటన్లు.పొడవు; సూచిక++ ) {
బటన్లు [ సూచిక ] .onclick = ఫంక్షన్ ( ) {
అప్రమత్తం ( this.id ) ;
}
}
స్క్రిప్ట్ >
మేము ప్రతి బటన్‌తో కూడా సెటప్ చేయవచ్చు క్లిక్ చేయండి వ్యక్తిగతంగా ఈవెంట్:
DOCTYPE html >
< html >
< శరీరం >
< కేంద్రం >
< div శైలి = 'మార్జిన్-టాప్: 50px;' >
< h2 > కింది బటన్లలో ఒకదానిని క్లిక్ చేయండి h2 >
< బటన్ id = 'బటన్_వన్' శైలి = 'వెడల్పు: 100px; ఎత్తు:40px; మార్జిన్-కుడి: 10px;' క్లిక్ చేయండి = 'alertId(this.id)' > 1 బటన్ >
< బటన్ id = 'బటన్_రెండు' శైలి = 'వెడల్పు: 100px; ఎత్తు:40px;' క్లిక్ చేయండి = 'alertId(this.id)' > రెండు బటన్ >
div >
కేంద్రం >
శరీరం >
< స్క్రిప్ట్ >
ఫంక్షన్ అలర్ట్ ఐడి ( id ) {
అప్రమత్తం ( id )
}
స్క్రిప్ట్ >
html >
j క్వెరీని ఉపయోగించి క్లిక్ చేసిన బటన్ యొక్క IDని ఎలా పొందాలి?
j క్వెరీ అనేక విభిన్న పద్ధతులను కలిగి ఉంది, వీటిని క్లిక్ చేసిన బటన్ యొక్క IDని పొందడానికి ఉపయోగించవచ్చు. మేము దీనితో ప్రారంభిస్తాము క్లిక్() సెలెక్టర్‌పై వర్తించే పద్ధతి మరియు ఫంక్షన్ పేరును ఐచ్ఛిక వాదనగా తీసుకుంటుంది:
DOCTYPE html >
< html >
< శరీరం >
< కేంద్రం >
< div శైలి = 'మార్జిన్-టాప్: 50px;' >
< h2 > కింది బటన్లలో ఒకదానిని క్లిక్ చేయండి h2 >
< బటన్ id = 'బటన్_వన్' శైలి = 'వెడల్పు: 100px; ఎత్తు:40px; మార్జిన్-కుడి: 10px;' క్లిక్ చేయండి = 'alertId(this.id)' > 1 బటన్ >
< బటన్ id = 'బటన్_రెండు' శైలి = 'వెడల్పు: 100px; ఎత్తు:40px;' క్లిక్ చేయండి = 'alertId(this.id)' > రెండు బటన్ >
div >
కేంద్రం >
శరీరం >
< స్క్రిప్ట్ >
$ ( 'బటన్' ) .క్లిక్ చేయండి ( అలర్ట్ ఐడి ( $ ( ఇది ) .attr ( 'id' ) ) ) ;
ఫంక్షన్ అలర్ట్ ఐడి ( id ) {
అప్రమత్తం ( id )
}
స్క్రిప్ట్ >
html >
మేము కూడా ఉపయోగించవచ్చు పై() ఈవెంట్ హ్యాండ్లర్‌లను అంశాలకు జోడించే పద్ధతి. ది పై() పద్ధతి కొన్ని ఇతర ఐచ్ఛిక ఆర్గ్యుమెంట్‌లతో పాటు కనీసం ఒక ఈవెంట్‌ను ఆర్గ్యుమెంట్‌గా తీసుకుంటుంది:
< html >
< శరీరం >
< కేంద్రం >
< div శైలి = 'మార్జిన్-టాప్: 50px;' >
< h2 > కింది బటన్లలో ఒకదానిని క్లిక్ చేయండి h2 >
< బటన్ id = 'బటన్_వన్' శైలి = 'వెడల్పు: 100px; ఎత్తు:40px; మార్జిన్-కుడి: 10px;' క్లిక్ చేయండి = 'alertId(this.id)' > 1 బటన్ >
< బటన్ id = 'బటన్_రెండు' శైలి = 'వెడల్పు: 100px; ఎత్తు:40px;' క్లిక్ చేయండి = 'alertId(this.id)' > రెండు బటన్ >
div >
కేంద్రం >
శరీరం >
< స్క్రిప్ట్ >
$ ( 'బటన్' ) .పై ( 'క్లిక్' , అలర్ట్ ఐడి ( $ ( ఇది ) .attr ( 'id' ) ) ) ;
ఫంక్షన్ అలర్ట్ ఐడి ( id ) {
అప్రమత్తం ( id )
}
స్క్రిప్ట్ >
html >
ముగింపు
క్లిక్ చేసిన బటన్ యొక్క IDని సాదా JavaScript మరియు j క్వెరీ రెండింటి ద్వారా యాక్సెస్ చేయవచ్చు. మేము అలాంటి నాలుగు పద్ధతులను చర్చించాము మరియు ఈ వ్రాతలో లోతైన వివరాలు మరియు సంబంధిత ఉదాహరణలను అందించాము.