Soms moet een ontwikkelaar de ID weten van de knop waarop de gebruiker heeft geklikt om verdere actie op een webpagina te bepalen. Zoals je in dit artikel zult zien, kan dit worden gedaan via zowel vanilla JavaScript als jQuery. Laten we beginnen:
Eerst zullen we een eenvoudige HTML-webpagina maken met twee knoppen in het midden van de pagina:
DOCTYPE html >
< html >
< lichaam >
< centrum >
< div stijl = 'marge-top: 50px;' >
< h2 > Klik op een van de volgende knoppen: h2 >
< knop ID kaart = 'button_one' stijl = 'breedte: 100px; hoogte:40px; marge-rechts: 10px;' > 1 knop >
< knop ID kaart = 'button_two' stijl = 'breedte: 100px; hoogte:40px;' > twee knop >
div >
centrum >
lichaam >
html >
Hoe de ID van de aangeklikte knop te verkrijgen met JavaScript?
We kunnen de ID van de aangeklikte knop op verschillende manieren verkrijgen met JavaScript. In onze eerste methode krijgen we de knooppuntenlijst van alle knoptags en slaan we ze op in een variabele. Vervolgens herhalen we de nodelist om de ID te krijgen van de knop waarop is geklikt:
< script >
var buttons = document.getElementsByTagName ( 'knop' ) ;
voor ( laten index = 0 ; inhoudsopgave < knopen.lengte; index++ ) {
toetsen [ inhoudsopgave ] .onclick = functie ( ) {
alarmeren ( dit.id ) ;
}
}
script >
We kunnen elke knop ook instellen met: bij klikken evenement individueel:
DOCTYPE html >
< html >
< lichaam >
< centrum >
< div stijl = 'marge-top: 50px;' >
< h2 > Klik op een van de volgende knoppen: h2 >
< knop ID kaart = 'button_one' stijl = 'breedte: 100px; hoogte:40px; marge-rechts: 10px;' bij klikken = 'alertId(this.id)' > 1 knop >
< knop ID kaart = 'button_two' stijl = 'breedte: 100px; hoogte:40px;' bij klikken = 'alertId(this.id)' > twee knop >
div >
centrum >
lichaam >
< script >
functie alertId ( ID kaart ) {
alarmeren ( ID kaart )
}
script >
html >
Hoe de ID van de aangeklikte knop te verkrijgen met jQuery?
jQuery heeft ook verschillende methoden die kunnen worden gebruikt om de ID van een aangeklikte knop te krijgen. We beginnen met de Klik() methode die wordt toegepast op een selector en een functienaam als optioneel argument heeft:
DOCTYPE html >
< html >
< lichaam >
< centrum >
< div stijl = 'marge-top: 50px;' >
< h2 > Klik op een van de volgende knoppen: h2 >
< knop ID kaart = 'button_one' stijl = 'breedte: 100px; hoogte:40px; marge-rechts: 10px;' bij klikken = 'alertId(this.id)' > 1 knop >
< knop ID kaart = 'button_two' stijl = 'breedte: 100px; hoogte:40px;' bij klikken = 'alertId(this.id)' > twee knop >
div >
centrum >
lichaam >
< script >
$ ( 'knop' ) .Klik ( alertId ( $ ( deze ) .attr ( 'ID kaart' ) ) ) ;
functie alertId ( ID kaart ) {
alarmeren ( ID kaart )
}
script >
html >
We kunnen ook de Aan() methode om gebeurtenishandlers aan elementen te koppelen. De Aan() methode neemt ten minste één gebeurtenis als argument samen met enkele andere optionele argumenten:
< html >
< lichaam >
< centrum >
< div stijl = 'marge-top: 50px;' >
< h2 > Klik op een van de volgende knoppen: h2 >
< knop ID kaart = 'button_one' stijl = 'breedte: 100px; hoogte:40px; marge-rechts: 10px;' bij klikken = 'alertId(this.id)' > 1 knop >
< knop ID kaart = 'button_two' stijl = 'breedte: 100px; hoogte:40px;' bij klikken = 'alertId(this.id)' > twee knop >
div >
centrum >
lichaam >
< script >
$ ( 'knop' ) .Aan ( 'Klik' , alertId ( $ ( deze ) .attr ( 'ID kaart' ) ) ) ;
functie alertId ( ID kaart ) {
alarmeren ( ID kaart )
}
script >
html >
Conclusie
De ID van een aangeklikte knop is toegankelijk via zowel gewoon JavaScript als jQuery. We hebben vier van dergelijke methoden besproken en in dit artikel diepgaande details en relevante voorbeelden gegeven.