Nogle gange skal en udvikler kende ID'et på den knap, som brugeren har klikket på, for at beslutte den videre handling på en webside. Som du vil se i denne artikel, kan dette gøres gennem både vanilla JavaScript og jQuery. Så lad os begynde:
Først vil vi oprette en simpel HTML-webside, som har to knapper i midten af siden:
DOCTYPE html >
< html >
< legeme >
< centrum >
< div stil = 'margin-top: 50px;' >
< h2 > Klik på en af følgende knapper h2 >
< knap id = 'button_one' stil = 'bredde: 100px; højde:40px; margin-højre: 10px;' > 1 knap >
< knap id = 'knap_to' stil = 'bredde: 100px; højde:40px;' > to knap >
div >
centrum >
legeme >
html >
Hvordan får man id'et for den klikkede knap ved hjælp af JavaScript?
Vi kan få ID'et på den klikkede knap ved hjælp af JavaScript på flere forskellige metoder. I vores første metode får vi nodelisten over alle knap-tags og gemmer dem i en variabel. Derefter vil vi iterere over nodelisten for at få ID'et på den knap, der er blevet klikket på:
< manuskript >
var buttons = document.getElementsByTagName ( 'knap' ) ;
til ( lade indeks = 0 ; indeks < knapper.længde; indeks++ ) {
knapper [ indeks ] .onclick = fungere ( ) {
alert ( dette.id ) ;
}
}
manuskript >
Vi kan også opsætte hver knap med onclick begivenhed individuelt:
DOCTYPE html >
< html >
< legeme >
< centrum >
< div stil = 'margin-top: 50px;' >
< h2 > Klik på en af følgende knapper h2 >
< knap id = 'button_one' stil = 'bredde: 100px; højde:40px; margin-højre: 10px;' onclick = 'alertId(this.id)' > 1 knap >
< knap id = 'knap_to' stil = 'bredde: 100px; højde:40px;' onclick = 'alertId(this.id)' > to knap >
div >
centrum >
legeme >
< manuskript >
fungere alarmId ( id ) {
alert ( id )
}
manuskript >
html >
Hvordan får man ID'et på den klikkede knap ved hjælp af jQuery?
jQuery har også flere forskellige metoder, som kan bruges til at få ID'et på en klikket knap. Vi starter med klik() metode, der anvendes på en vælger og tager et funktionsnavn som et valgfrit argument:
DOCTYPE html >
< html >
< legeme >
< centrum >
< div stil = 'margin-top: 50px;' >
< h2 > Klik på en af følgende knapper h2 >
< knap id = 'button_one' stil = 'bredde: 100px; højde:40px; margin-højre: 10px;' onclick = 'alertId(this.id)' > 1 knap >
< knap id = 'knap_to' stil = 'bredde: 100px; højde:40px;' onclick = 'alertId(this.id)' > to knap >
div >
centrum >
legeme >
< manuskript >
$ ( 'knap' ) .klik ( alarmId ( $ ( dette ) .attr ( 'id' ) ) ) ;
fungere alarmId ( id ) {
alert ( id )
}
manuskript >
html >
Vi kan også bruge på() metode til at knytte hændelseshandlere til elementer. Det på() metoden tager mindst én hændelse som et argument sammen med nogle andre valgfrie argumenter:
< html >
< legeme >
< centrum >
< div stil = 'margin-top: 50px;' >
< h2 > Klik på en af følgende knapper h2 >
< knap id = 'button_one' stil = 'bredde: 100px; højde:40px; margin-højre: 10px;' onclick = 'alertId(this.id)' > 1 knap >
< knap id = 'knap_to' stil = 'bredde: 100px; højde:40px;' onclick = 'alertId(this.id)' > to knap >
div >
centrum >
legeme >
< manuskript >
$ ( 'knap' ) .på ( 'klik' , alarmId ( $ ( dette ) .attr ( 'id' ) ) ) ;
fungere alarmId ( id ) {
alert ( id )
}
manuskript >
html >
Konklusion
ID'et for en klikket knap kan tilgås gennem både almindelig JavaScript og jQuery. Vi diskuterede fire sådanne metoder og gav dybdegående detaljer og relevante eksempler i denne artikel.