Včasih mora razvijalec poznati ID gumba, ki ga je uporabnik kliknil, da se odloči za nadaljnje dejanje na spletni strani. Kot boste videli v tem prispevku, je to mogoče storiti tako s pomočjo nenavadnega JavaScripta kot jQueryja. Torej, začnimo:
Najprej bomo ustvarili preprosto spletno stran HTML z dvema gumboma na sredini strani:
DOCTYPE html >
< html >
< telo >
< center >
< div stil = 'zgornji rob: 50 slikovnih pik;' >
< h2 > Kliknite enega od naslednjih gumbov h2 >
< gumb id = 'gumb_ena' stil = 'širina: 100 slikovnih pik; višina: 40 slikovnih pik; desni rob: 10 slikovnih pik;' > 1 gumb >
< gumb id = 'gumb_dva' stil = 'širina: 100 slikovnih pik; višina: 40 slikovnih pik;' > dva gumb >
div >
center >
telo >
html >
Kako pridobiti ID kliknjenega gumba z uporabo JavaScripta?
ID kliknjenega gumba lahko pridobimo s pomočjo JavaScripta na več različnih načinov. V naši prvi metodi bomo dobili seznam vozlišč vseh oznak gumbov in jih shranili v spremenljivko. Nato bomo pregledali seznam vozlišč, da dobimo ID gumba, ki je bil kliknjen:
< scenarij >
var buttons = document.getElementsByTagName ( 'gumb' ) ;
za ( pustiti indeks = 0 ; kazalo < gumbi.dolžina; indeks++ ) {
gumbi [ kazalo ] .onclick = funkcijo ( ) {
opozorilo ( this.id ) ;
}
}
scenarij >
Prav tako lahko nastavimo vsak gumb z onclick dogodek posamično:
DOCTYPE html >
< html >
< telo >
< center >
< div stil = 'zgornji rob: 50 slikovnih pik;' >
< h2 > Kliknite enega od naslednjih gumbov h2 >
< gumb id = 'gumb_ena' stil = 'širina: 100 slikovnih pik; višina: 40 slikovnih pik; desni rob: 10 slikovnih pik;' onclick = 'alertId(this.id)' > 1 gumb >
< gumb id = 'gumb_dva' stil = 'širina: 100 slikovnih pik; višina: 40 slikovnih pik;' onclick = 'alertId(this.id)' > dva gumb >
div >
center >
telo >
< scenarij >
funkcijo alertId ( id ) {
opozorilo ( id )
}
scenarij >
html >
Kako pridobiti ID kliknjenega gumba z uporabo jQuery?
jQuery ima tudi več različnih metod, ki jih je mogoče uporabiti za pridobitev ID-ja kliknjenega gumba. Začeli bomo z klik() metoda, ki je uporabljena na izbirniku in sprejme ime funkcije kot izbirni argument:
DOCTYPE html >
< html >
< telo >
< center >
< div stil = 'zgornji rob: 50 slikovnih pik;' >
< h2 > Kliknite enega od naslednjih gumbov h2 >
< gumb id = 'gumb_ena' stil = 'širina: 100 slikovnih pik; višina: 40 slikovnih pik; desni rob: 10 slikovnih pik;' onclick = 'alertId(this.id)' > 1 gumb >
< gumb id = 'gumb_dva' stil = 'širina: 100 slikovnih pik; višina: 40 slikovnih pik;' onclick = 'alertId(this.id)' > dva gumb >
div >
center >
telo >
< scenarij >
$ ( 'gumb' ) .kliknite ( alertId ( $ ( to ) .attr ( 'id' ) ) ) ;
funkcijo alertId ( id ) {
opozorilo ( id )
}
scenarij >
html >
Uporabimo lahko tudi na () metoda za pripenjanje obdelovalcev dogodkov elementom. The na () metoda sprejme vsaj en dogodek kot argument skupaj z nekaterimi drugimi neobveznimi argumenti:
< html >
< telo >
< center >
< div stil = 'zgornji rob: 50 slikovnih pik;' >
< h2 > Kliknite enega od naslednjih gumbov h2 >
< gumb id = 'gumb_ena' stil = 'širina: 100 slikovnih pik; višina: 40 slikovnih pik; desni rob: 10 slikovnih pik;' onclick = 'alertId(this.id)' > 1 gumb >
< gumb id = 'gumb_dva' stil = 'širina: 100 slikovnih pik; višina: 40 slikovnih pik;' onclick = 'alertId(this.id)' > dva gumb >
div >
center >
telo >
< scenarij >
$ ( 'gumb' ) .na ( 'klik' , alertId ( $ ( to ) .attr ( 'id' ) ) ) ;
funkcijo alertId ( id ) {
opozorilo ( id )
}
scenarij >
html >
Zaključek
Do ID-ja kliknjenega gumba lahko dostopate prek navadnega JavaScripta in jQueryja. Razpravljali smo o štirih takih metodah in v tem prispevku navedli podrobne podrobnosti in ustrezne primere.