A volte uno sviluppatore deve conoscere l'ID del pulsante su cui l'utente ha fatto clic per decidere l'ulteriore corso d'azione su una pagina web. Come vedrai in questo articolo, questo può essere fatto sia tramite JavaScript vanilla che jQuery. Quindi, iniziamo:
Per prima cosa, creeremo una semplice pagina Web HTML che ha due pulsanti al centro della pagina:
DOCTYPE html >
< html >
< corpo >
< centro >
< div stile = 'margine superiore: 50px;' >
< h2 > Fare clic su uno dei seguenti pulsanti h2 >
< pulsante id = 'pulsante_uno' stile = 'larghezza: 100px; altezza:40px; margine-destra: 10px;' > 1 pulsante >
< pulsante id = 'pulsante_due' stile = 'larghezza: 100px; altezza:40px;' > Due pulsante >
div >
centro >
corpo >
html >
Come ottenere l'ID del pulsante cliccato utilizzando JavaScript?
Possiamo ottenere l'ID del pulsante cliccato usando JavaScript in diversi metodi. Nel nostro primo metodo, otterremo l'elenco dei nodi di tutti i tag dei pulsanti e li memorizzeremo all'interno di una variabile. Quindi itereremo sull'elenco dei nodi per ottenere l'ID del pulsante su cui è stato fatto clic:
< sceneggiatura >
pulsanti var = document.getElementsByTagName ( 'pulsante' ) ;
per ( permettere indice = 0 ; indice < pulsanti.lunghezza; indice++ ) {
pulsanti [ indice ] .un clic = funzione ( ) {
mettere in guardia ( questo.id ) ;
}
}
sceneggiatura >
Possiamo anche impostare ogni pulsante con al clic evento individualmente:
DOCTYPE html >
< html >
< corpo >
< centro >
< div stile = 'margine superiore: 50px;' >
< h2 > Fare clic su uno dei seguenti pulsanti h2 >
< pulsante id = 'pulsante_uno' stile = 'larghezza: 100px; altezza:40px; margine-destra: 10px;' al clic = 'alertId(this.id)' > 1 pulsante >
< pulsante id = 'pulsante_due' stile = 'larghezza: 100px; altezza:40px;' al clic = 'alertId(this.id)' > Due pulsante >
div >
centro >
corpo >
< sceneggiatura >
funzione alertId ( id ) {
mettere in guardia ( id )
}
sceneggiatura >
html >
Come ottenere l'ID del pulsante cliccato utilizzando jQuery?
jQuery ha anche diversi metodi che possono essere utilizzati per ottenere l'ID di un pulsante cliccato. Inizieremo con il clic() metodo che viene applicato su un selettore e accetta un nome di funzione come argomento facoltativo:
DOCTYPE html >
< html >
< corpo >
< centro >
< div stile = 'margine superiore: 50px;' >
< h2 > Fare clic su uno dei seguenti pulsanti h2 >
< pulsante id = 'pulsante_uno' stile = 'larghezza: 100px; altezza:40px; margine-destra: 10px;' al clic = 'alertId(this.id)' > 1 pulsante >
< pulsante id = 'pulsante_due' stile = 'larghezza: 100px; altezza:40px;' al clic = 'alertId(this.id)' > Due pulsante >
div >
centro >
corpo >
< sceneggiatura >
$ ( 'pulsante' ) .clic ( alertId ( $ ( questo ) .attr ( 'id' ) ) ) ;
funzione alertId ( id ) {
mettere in guardia ( id )
}
sceneggiatura >
html >
Possiamo anche usare il Su() metodo per allegare gestori di eventi agli elementi. Il Su() il metodo accetta almeno un evento come argomento insieme ad altri argomenti opzionali:
< html >
< corpo >
< centro >
< div stile = 'margine superiore: 50px;' >
< h2 > Fare clic su uno dei seguenti pulsanti h2 >
< pulsante id = 'pulsante_uno' stile = 'larghezza: 100px; altezza:40px; margine-destra: 10px;' al clic = 'alertId(this.id)' > 1 pulsante >
< pulsante id = 'pulsante_due' stile = 'larghezza: 100px; altezza:40px;' al clic = 'alertId(this.id)' > Due pulsante >
div >
centro >
corpo >
< sceneggiatura >
$ ( 'pulsante' ) .Su ( 'clic' , ID avviso ( $ ( questo ) .attr ( 'id' ) ) ) ;
funzione alertId ( id ) {
mettere in guardia ( id )
}
sceneggiatura >
html >
Conclusione
È possibile accedere all'ID di un pulsante cliccato tramite JavaScript semplice e jQuery. Abbiamo discusso quattro di questi metodi e fornito dettagli approfonditi ed esempi pertinenti in questo articolo.