Noen ganger må en utvikler kjenne ID-en til knappen som brukeren har klikket på for å bestemme videre handling på en nettside. Som du vil se i denne artikkelen, kan dette gjøres gjennom både vanilla JavaScript og jQuery. Så la oss begynne:
Først vil vi lage en enkel HTML-nettside som har to knapper i midten av siden:
DOCTYPE html >
< html >
< kropp >
< senter >
< div stil = 'margin-top: 50px;' >
< h2 > Klikk på en av følgende knapper h2 >
< knapp id = 'button_one' stil = 'bredde: 100px; høyde:40px; margin-høyre: 10px;' > 1 knapp >
< knapp id = 'knapp_to' stil = 'bredde: 100px; høyde:40px;' > to knapp >
div >
senter >
kropp >
html >
Hvordan få IDen til den klikkede knappen ved å bruke JavaScript?
Vi kan få IDen til den klikkede knappen ved å bruke JavaScript på flere forskjellige metoder. I vår første metode vil vi få nodelisten over alle knappetaggene og lagre dem i en variabel. Deretter vil vi iterere over nodelisten for å få ID-en til knappen som har blitt klikket:
< manus >
var buttons = document.getElementsByTagName ( 'knapp' ) ;
til ( la indeks = 0 ; indeks < knapper.lengde; indeks++ ) {
knapper [ indeks ] .onclick = funksjon ( ) {
varsling ( denne.id ) ;
}
}
manus >
Vi kan også sette opp hver knapp med ved trykk arrangement individuelt:
DOCTYPE html >
< html >
< kropp >
< senter >
< div stil = 'margin-top: 50px;' >
< h2 > Klikk på en av følgende knapper h2 >
< knapp id = 'button_one' stil = 'bredde: 100px; høyde:40px; margin-høyre: 10px;' ved trykk = 'alertId(this.id)' > 1 knapp >
< knapp id = 'knapp_to' stil = 'bredde: 100px; høyde:40px;' ved trykk = 'alertId(this.id)' > to knapp >
div >
senter >
kropp >
< manus >
funksjon alertId ( id ) {
varsling ( id )
}
manus >
html >
Hvordan få IDen til den klikkede knappen ved å bruke jQuery?
jQuery har også flere forskjellige metoder som kan brukes for å få IDen til en klikket knapp. Vi starter med klikk() metode som brukes på en velger og tar et funksjonsnavn som et valgfritt argument:
DOCTYPE html >
< html >
< kropp >
< senter >
< div stil = 'margin-top: 50px;' >
< h2 > Klikk på en av følgende knapper h2 >
< knapp id = 'button_one' stil = 'bredde: 100px; høyde:40px; margin-høyre: 10px;' ved trykk = 'alertId(this.id)' > 1 knapp >
< knapp id = 'knapp_to' stil = 'bredde: 100px; høyde:40px;' ved trykk = 'alertId(this.id)' > to knapp >
div >
senter >
kropp >
< manus >
$ ( 'knapp' ) .klikk ( alertId ( $ ( dette ) .attr ( 'id' ) ) ) ;
funksjon alertId ( id ) {
varsling ( id )
}
manus >
html >
Vi kan også bruke på() metode for å knytte hendelsesbehandlere til elementer. De på() metoden tar minst én hendelse som et argument sammen med noen andre valgfrie argumenter:
< html >
< kropp >
< senter >
< div stil = 'margin-top: 50px;' >
< h2 > Klikk på en av følgende knapper h2 >
< knapp id = 'button_one' stil = 'bredde: 100px; høyde:40px; margin-høyre: 10px;' ved trykk = 'alertId(this.id)' > 1 knapp >
< knapp id = 'knapp_to' stil = 'bredde: 100px; høyde:40px;' ved trykk = 'alertId(this.id)' > to knapp >
div >
senter >
kropp >
< manus >
$ ( 'knapp' ) .på ( 'klikk' , alertId ( $ ( dette ) .attr ( 'id' ) ) ) ;
funksjon alertId ( id ) {
varsling ( id )
}
manus >
html >
Konklusjon
IDen til en klikket knapp kan nås gjennom både vanlig JavaScript og jQuery. Vi diskuterte fire slike metoder og ga detaljerte detaljer og relevante eksempler i denne artikkelen.