De vegades, un desenvolupador ha de conèixer l'identificador del botó en el qual l'usuari ha fet clic per decidir més accions en una pàgina web. Com veureu en aquest escrit, això es pot fer tant a través de JavaScript de vanilla com de jQuery. Així doncs, comencem:
Primer, crearem una pàgina web HTML senzilla que té dos botons al centre de la pàgina:
DOCTYPE html >
< html >
< cos >
< centre >
< div estil = 'marge superior: 50 píxels;' >
< h2 > Feu clic a un dels botons següents h2 >
< botó id = 'botó_un' estil = 'amplada: 100 px; alçada: 40 px; marge dret: 10 px;' > 1 botó >
< botó id = 'botó_dos' estil = 'amplada: 100 píxels; alçada: 40 píxels;' > 2 botó >
div >
centre >
cos >
html >
Com obtenir l'identificador del botó clicat mitjançant JavaScript?
Podem obtenir l'ID del botó clicat mitjançant JavaScript de diversos mètodes diferents. En el nostre primer mètode, obtindrem la llista de nodes de totes les etiquetes de botons i les emmagatzemarem dins d'una variable. A continuació, repetirem la llista de nodes per obtenir l'ID del botó que s'ha fet clic:
< guió >
var buttons = document.getElementsByTagName ( 'botó' ) ;
per ( deixar índex = 0 ; índex < botons.longitud; índex++ ) {
botons [ índex ] .onclick = funció ( ) {
alerta ( this.id ) ;
}
}
guió >
També podem configurar cada botó amb fent clic esdeveniment individualment:
DOCTYPE html >
< html >
< cos >
< centre >
< div estil = 'marge superior: 50 píxels;' >
< h2 > Feu clic a un dels botons següents h2 >
< botó id = 'botó_un' estil = 'amplada: 100 px; alçada: 40 px; marge dret: 10 px;' fent clic = 'alertId(this.id)' > 1 botó >
< botó id = 'botó_dos' estil = 'amplada: 100 píxels; alçada: 40 píxels;' fent clic = 'alertId(this.id)' > 2 botó >
div >
centre >
cos >
< guió >
funció alertId ( id ) {
alerta ( id )
}
guió >
html >
Com obtenir l'ID del botó fet clic amb jQuery?
jQuery també té diversos mètodes diferents que es poden utilitzar per obtenir l'ID d'un botó clicat. Començarem amb el clic () mètode que s'aplica a un selector i pren un nom de funció com a argument opcional:
DOCTYPE html >
< html >
< cos >
< centre >
< div estil = 'marge superior: 50 píxels;' >
< h2 > Feu clic a un dels botons següents h2 >
< botó id = 'botó_un' estil = 'amplada: 100 px; alçada: 40 px; marge dret: 10 px;' fent clic = 'alertId(this.id)' > 1 botó >
< botó id = 'botó_dos' estil = 'amplada: 100 píxels; alçada: 40 píxels;' fent clic = 'alertId(this.id)' > 2 botó >
div >
centre >
cos >
< guió >
$ ( 'botó' ) .clic ( alertId ( $ ( això ) .attr ( 'id' ) ) ) ;
funció alertId ( id ) {
alerta ( id )
}
guió >
html >
També podem utilitzar el en() mètode per adjuntar controladors d'esdeveniments als elements. El en() El mètode pren almenys un esdeveniment com a argument juntament amb altres arguments opcionals:
< html >
< cos >
< centre >
< div estil = 'marge superior: 50 píxels;' >
< h2 > Feu clic a un dels botons següents h2 >
< botó id = 'botó_un' estil = 'amplada: 100 px; alçada: 40 px; marge dret: 10 px;' fent clic = 'alertId(this.id)' > 1 botó >
< botó id = 'botó_dos' estil = 'amplada: 100 píxels; alçada: 40 píxels;' fent clic = 'alertId(this.id)' > 2 botó >
div >
centre >
cos >
< guió >
$ ( 'botó' ) .en ( 'clic' , alertId ( $ ( això ) .attr ( 'id' ) ) ) ;
funció alertId ( id ) {
alerta ( id )
}
guió >
html >
Conclusió
Es pot accedir a l'identificador d'un botó clicat mitjançant JavaScript senzill i jQuery. Vam discutir quatre d'aquests mètodes i vam donar detalls en profunditat i exemples rellevants en aquest escrit.