Joskus kehittäjän on tiedettävä sen painikkeen tunnus, jota käyttäjä on napsauttanut päättääkseen jatkotoimista verkkosivulla. Kuten näet tästä kirjoituksesta, tämä voidaan tehdä sekä vanilla JavaScriptin että jQueryn kautta. Joten aloitetaan:
Ensin luodaan yksinkertainen HTML-verkkosivu, jossa on kaksi painiketta sivun keskellä:
DOCTYPE html >
< html >
< kehon >
< keskusta >
< div tyyli = 'margin-top: 50px;' >
< h2 > Napsauta jotakin seuraavista painikkeista h2 >
< -painiketta id = 'button_one' tyyli = 'leveys: 100px; korkeus: 40px; marginaali-oikea: 10px;' > 1 -painiketta >
< -painiketta id = 'painike_kaksi' tyyli = 'width: 100px; height:40px;' > kaksi -painiketta >
div >
keskusta >
kehon >
html >
Kuinka saada napsautetun painikkeen tunnus JavaScriptin avulla?
Voimme saada napsautetun painikkeen tunnuksen JavaScriptin avulla useilla eri tavoilla. Ensimmäisessä menetelmässä saamme kaikkien painiketunnisteiden solmuluettelon ja tallennamme ne muuttujan sisään. Sitten toistamme solmuluettelon saadaksemme napsautetun painikkeen tunnuksen:
< käsikirjoitus >
var buttons = document.getElementsByTagName ( 'painike' ) ;
varten ( päästää indeksi = 0 ; indeksi < painikkeet.pituus; indeksi++ ) {
painikkeet [ indeksi ] .onclick = toiminto ( ) {
hälytys ( this.id ) ;
}
}
käsikirjoitus >
Voimme myös määrittää jokaisen painikkeen klikkaamalla tapahtuma erikseen:
DOCTYPE html >
< html >
< kehon >
< keskusta >
< div tyyli = 'margin-top: 50px;' >
< h2 > Napsauta jotakin seuraavista painikkeista h2 >
< -painiketta id = 'button_one' tyyli = 'leveys: 100px; korkeus: 40px; marginaali-oikea: 10px;' klikkaamalla = 'alertId(this.id)' > 1 -painiketta >
< -painiketta id = 'painike_kaksi' tyyli = 'width: 100px; height:40px;' klikkaamalla = 'alertId(this.id)' > kaksi -painiketta >
div >
keskusta >
kehon >
< käsikirjoitus >
toiminto alertId ( id ) {
hälytys ( id )
}
käsikirjoitus >
html >
Kuinka saada napsautetun painikkeen tunnus jQueryn avulla?
jQuerylla on myös useita erilaisia menetelmiä, joilla voidaan saada napsautetun painikkeen tunnus. Aloitamme kanssa klikkaus() menetelmä, jota käytetään valitsimessa ja joka ottaa funktion nimen valinnaisena argumenttina:
DOCTYPE html >
< html >
< kehon >
< keskusta >
< div tyyli = 'margin-top: 50px;' >
< h2 > Napsauta jotakin seuraavista painikkeista h2 >
< -painiketta id = 'button_one' tyyli = 'leveys: 100px; korkeus: 40px; marginaali-oikea: 10px;' klikkaamalla = 'alertId(this.id)' > 1 -painiketta >
< -painiketta id = 'painike_kaksi' tyyli = 'width: 100px; height:40px;' klikkaamalla = 'alertId(this.id)' > kaksi -painiketta >
div >
keskusta >
kehon >
< käsikirjoitus >
$ ( 'painike' ) .klikkaus ( alertId ( $ ( Tämä ) .attr ( 'id' ) ) ) ;
toiminto alertId ( id ) {
hälytys ( id )
}
käsikirjoitus >
html >
Voimme myös käyttää päällä() tapa liittää tapahtumakäsittelijät elementteihin. The päällä() menetelmä ottaa ainakin yhden tapahtuman argumenttina yhdessä muiden valinnaisten argumenttien kanssa:
< html >
< kehon >
< keskusta >
< div tyyli = 'margin-top: 50px;' >
< h2 > Napsauta jotakin seuraavista painikkeista h2 >
< -painiketta id = 'button_one' tyyli = 'leveys: 100px; korkeus: 40px; marginaali-oikea: 10px;' klikkaamalla = 'alertId(this.id)' > 1 -painiketta >
< -painiketta id = 'painike_kaksi' tyyli = 'width: 100px; height:40px;' klikkaamalla = 'alertId(this.id)' > kaksi -painiketta >
div >
keskusta >
kehon >
< käsikirjoitus >
$ ( 'painike' ) .päällä ( 'klikkaus' , AlertId ( $ ( Tämä ) .attr ( 'id' ) ) ) ;
toiminto alertId ( id ) {
hälytys ( id )
}
käsikirjoitus >
html >
Johtopäätös
Napsautetun painikkeen tunnukseen pääsee käsiksi sekä tavallisen JavaScriptin että jQueryn kautta. Keskustelimme neljästä tällaisesta menetelmästä ja annoimme perusteellisia yksityiskohtia ja asiaankuuluvia esimerkkejä tässä kirjoituksessa.