Niekedy musí vývojár poznať ID tlačidla, na ktoré používateľ klikol, aby mohol rozhodnúť o ďalšom postupe na webovej stránke. Ako uvidíte v tomto zápise, dá sa to urobiť pomocou vanilkového JavaScriptu aj jQuery. Takže začnime:
Najprv vytvoríme jednoduchú HTML webovú stránku, ktorá má dve tlačidlá v strede stránky:
DOCTYPE html >
< html >
< telo >
< centrum >
< div štýl = 'margin-top: 50px;' >
< h2 > Kliknite na jedno z nasledujúcich tlačidiel h2 >
< tlačidlo id = 'button_one' štýl = 'šírka: 100px; výška:40px; pravý okraj: 10px;' > 1 tlačidlo >
< tlačidlo id = 'tlačidlo_dva' štýl = 'width: 100px; height:40px;' > dva tlačidlo >
div >
centrum >
telo >
html >
Ako získať ID kliknutého tlačidla pomocou JavaScriptu?
ID kliknutého tlačidla môžeme získať pomocou JavaScriptu niekoľkými rôznymi spôsobmi. V našej prvej metóde získame zoznam uzlov všetkých značiek tlačidiel a uložíme ich do premennej. Potom budeme opakovať zoznam uzlov, aby sme získali ID tlačidla, na ktoré sa kliklo:
< skript >
var buttons = document.getElementsByTagName ( 'tlačidlo' ) ;
pre ( nech index = 0 ; index < gombíky.dĺžka; index++ ) {
tlačidlá [ index ] .onclick = funkciu ( ) {
upozorniť ( toto.id ) ;
}
}
skript >
Môžeme tiež nastaviť každé tlačidlo pomocou po kliknutí udalosť individuálne:
DOCTYPE html >
< html >
< telo >
< centrum >
< div štýl = 'margin-top: 50px;' >
< h2 > Kliknite na jedno z nasledujúcich tlačidiel h2 >
< tlačidlo id = 'button_one' štýl = 'šírka: 100px; výška:40px; pravý okraj: 10px;' po kliknutí = 'alertId(this.id)' > 1 tlačidlo >
< tlačidlo id = 'tlačidlo_dva' štýl = 'width: 100px; height:40px;' po kliknutí = 'alertId(this.id)' > dva tlačidlo >
div >
centrum >
telo >
< skript >
funkciu alertId ( id ) {
upozorniť ( id )
}
skript >
html >
Ako získať ID kliknutého tlačidla pomocou jQuery?
jQuery má tiež niekoľko rôznych metód, ktoré možno použiť na získanie ID kliknutého tlačidla. Začneme s klikni() metóda, ktorá sa aplikuje na selektor a berie názov funkcie ako voliteľný argument:
DOCTYPE html >
< html >
< telo >
< centrum >
< div štýl = 'margin-top: 50px;' >
< h2 > Kliknite na jedno z nasledujúcich tlačidiel h2 >
< tlačidlo id = 'button_one' štýl = 'šírka: 100px; výška:40px; pravý okraj: 10px;' po kliknutí = 'alertId(this.id)' > 1 tlačidlo >
< tlačidlo id = 'tlačidlo_dva' štýl = 'width: 100px; height:40px;' po kliknutí = 'alertId(this.id)' > dva tlačidlo >
div >
centrum >
telo >
< skript >
$ ( 'tlačidlo' ) .kliknite ( alertId ( $ ( toto ) .attr ( 'id' ) ) ) ;
funkciu alertId ( id ) {
upozorniť ( id )
}
skript >
html >
Môžeme tiež použiť na () metóda na pripojenie obsluhy udalostí k prvkom. The na () metóda berie aspoň jednu udalosť ako argument spolu s niektorými ďalšími voliteľnými argumentmi:
< html >
< telo >
< centrum >
< div štýl = 'margin-top: 50px;' >
< h2 > Kliknite na jedno z nasledujúcich tlačidiel h2 >
< tlačidlo id = 'button_one' štýl = 'šírka: 100px; výška:40px; pravý okraj: 10px;' po kliknutí = 'alertId(this.id)' > 1 tlačidlo >
< tlačidlo id = 'tlačidlo_dva' štýl = 'width: 100px; height:40px;' po kliknutí = 'alertId(this.id)' > dva tlačidlo >
div >
centrum >
telo >
< skript >
$ ( 'tlačidlo' ) .zap ( 'klikni' , alertId ( $ ( toto ) .attr ( 'id' ) ) ) ;
funkciu alertId ( id ) {
upozorniť ( id )
}
skript >
html >
Záver
K ID kliknutého tlačidla je možné pristupovať cez obyčajný JavaScript aj jQuery. Diskutovali sme o štyroch takýchto metódach a v tomto článku sme uviedli podrobné podrobnosti a relevantné príklady.