Uneori, un dezvoltator trebuie să cunoască ID-ul butonului pe care utilizatorul a făcut clic pentru a decide cursul de acțiune pe o pagină web. După cum veți vedea în acest articol, acest lucru se poate face atât prin JavaScript vanilla, cât și prin jQuery. Deci, să începem:
Mai întâi, vom crea o pagină web HTML simplă, care are două butoane în centrul paginii:
DOCTYPE html >
< html >
< corp >
< centru >
< div stil = 'margin-top: 50px;' >
< h2 > Faceți clic pe unul dintre următoarele butoane h2 >
< buton id = „button_one” stil = 'lățime: 100 px; înălțime: 40 px; margine-dreapta: 10 px;' > 1 buton >
< buton id = 'buton_doi' stil = 'lățime: 100 px; înălțime: 40 px;' > Două buton >
div >
centru >
corp >
html >
Cum să obțineți ID-ul butonului pe care l-ați făcut clic folosind JavaScript?
Putem obține ID-ul butonului apăsat folosind JavaScript în mai multe metode diferite. În prima noastră metodă, vom obține lista de noduri a tuturor etichetelor butoanelor și le vom stoca într-o variabilă. Apoi vom itera peste lista de noduri pentru a obține ID-ul butonului pe care a fost făcut clic:
< scenariu >
var butoane = document.getElementsByTagName ( 'buton' ) ;
pentru ( lăsa index = 0 ; index < nasturi.lungime; index++ ) {
butoane [ index ] .onclick = funcţie ( ) {
alerta ( aceasta.id ) ;
}
}
scenariu >
De asemenea, putem configura fiecare buton cu onclick eveniment individual:
DOCTYPE html >
< html >
< corp >
< centru >
< div stil = 'margin-top: 50px;' >
< h2 > Faceți clic pe unul dintre următoarele butoane h2 >
< buton id = „button_one” stil = 'lățime: 100 px; înălțime: 40 px; margine-dreapta: 10 px;' onclick = „alertId(this.id)” > 1 buton >
< buton id = 'buton_doi' stil = 'lățime: 100 px; înălțime: 40 px;' onclick = „alertId(this.id)” > Două buton >
div >
centru >
corp >
< scenariu >
funcţie alertId ( id ) {
alerta ( id )
}
scenariu >
html >
Cum să obțineți ID-ul butonului apăsat folosind jQuery?
jQuery are, de asemenea, mai multe metode diferite care pot fi folosite pentru a obține ID-ul unui buton pe care se face clic. Vom începe cu clic() metodă care este aplicată pe un selector și ia un nume de funcție ca argument opțional:
DOCTYPE html >
< html >
< corp >
< centru >
< div stil = 'margin-top: 50px;' >
< h2 > Faceți clic pe unul dintre următoarele butoane h2 >
< buton id = „button_one” stil = 'lățime: 100 px; înălțime: 40 px; margine-dreapta: 10 px;' onclick = „alertId(this.id)” > 1 buton >
< buton id = 'buton_doi' stil = 'lățime: 100 px; înălțime: 40 px;' onclick = „alertId(this.id)” > Două buton >
div >
centru >
corp >
< scenariu >
$ ( 'buton' ) .clic ( alertId ( $ ( acest ) .attr ( 'id' ) ) ) ;
funcţie alertId ( id ) {
alerta ( id )
}
scenariu >
html >
Putem folosi și pe() metodă de a atașa elementelor de gestionare a evenimentelor. The pe() metoda ia cel puțin un eveniment ca argument împreună cu alte argumente opționale:
< html >
< corp >
< centru >
< div stil = 'margin-top: 50px;' >
< h2 > Faceți clic pe unul dintre următoarele butoane h2 >
< buton id = „button_one” stil = 'lățime: 100 px; înălțime: 40 px; margine-dreapta: 10 px;' onclick = „alertId(this.id)” > 1 buton >
< buton id = 'buton_doi' stil = 'lățime: 100 px; înălțime: 40 px;' onclick = „alertId(this.id)” > Două buton >
div >
centru >
corp >
< scenariu >
$ ( 'buton' ) .pe ( 'clic' , alertId ( $ ( acest ) .attr ( 'id' ) ) ) ;
funcţie alertId ( id ) {
alerta ( id )
}
scenariu >
html >
Concluzie
ID-ul unui buton apăsat poate fi accesat atât prin JavaScript simplu, cât și prin jQuery. Am discutat patru astfel de metode și am oferit detalii aprofundate și exemple relevante în acest articol.