Mõnikord peab arendaja teadma selle nupu ID-d, millel kasutaja on klõpsanud, et otsustada, kuidas veebilehel edasi tegutseda. Nagu selles kirjutises näete, saab seda teha nii vanilje JavaScripti kui ka jQuery kaudu. Niisiis, alustame:
Esiteks loome lihtsa HTML-i veebilehe, millel on lehe keskel kaks nuppu:
DOCTYPE html >
< html >
< keha >
< Keskus >
< div stiilis = 'margin-top: 50px;' >
< h2 > Klõpsake ühte järgmistest nuppudest h2 >
< nuppu id = 'button_one' stiilis = 'laius: 100 pikslit; kõrgus: 40 pikslit; veeris-parem: 10 pikslit;' > 1 nuppu >
< nuppu id = 'nupp_kaks' stiilis = 'laius: 100 pikslit; kõrgus: 40 pikslit;' > kaks nuppu >
div >
Keskus >
keha >
html >
Kuidas saada JavaScripti abil klõpsatud nupu ID?
Klõpsatud nupu ID saame JavaScripti abil mitmel erineval viisil. Meie esimese meetodi puhul saame kõigi nuppude siltide sõlmeloendi ja salvestame need muutuja sisse. Seejärel kordame sõlmeloendit, et saada klõpsatud nupu ID:
< stsenaarium >
var buttons = document.getElementsByTagName ( 'nupp' ) ;
jaoks ( lase indeks = 0 ; indeks < nupud.pikkus; indeks++ ) {
nupud [ indeks ] .onclick = funktsiooni ( ) {
hoiatus ( this.id ) ;
}
}
stsenaarium >
Samuti saame iga nuppu seadistada onclick üritus individuaalselt:
DOCTYPE html >
< html >
< keha >
< Keskus >
< div stiilis = 'margin-top: 50px;' >
< h2 > Klõpsake ühte järgmistest nuppudest h2 >
< nuppu id = 'button_one' stiilis = 'laius: 100 pikslit; kõrgus: 40 pikslit; veeris-parem: 10 pikslit;' onclick = 'alertId(this.id)' > 1 nuppu >
< nuppu id = 'nupp_kaks' stiilis = 'laius: 100 pikslit; kõrgus: 40 pikslit;' onclick = 'alertId(this.id)' > kaks nuppu >
div >
Keskus >
keha >
< stsenaarium >
funktsiooni alertId ( id ) {
hoiatus ( id )
}
stsenaarium >
html >
Kuidas saada jQuery abil klõpsatud nupu ID?
jQueryl on ka mitu erinevat meetodit, mida saab kasutada klõpsatud nupu ID hankimiseks. Alustame kliki () meetod, mida rakendatakse valijale ja mis võtab valikulise argumendina funktsiooni nime:
DOCTYPE html >
< html >
< keha >
< Keskus >
< div stiilis = 'margin-top: 50px;' >
< h2 > Klõpsake ühte järgmistest nuppudest h2 >
< nuppu id = 'button_one' stiilis = 'laius: 100 pikslit; kõrgus: 40 pikslit; veeris-parem: 10 pikslit;' onclick = 'alertId(this.id)' > 1 nuppu >
< nuppu id = 'nupp_kaks' stiilis = 'laius: 100 pikslit; kõrgus: 40 pikslit;' onclick = 'alertId(this.id)' > kaks nuppu >
div >
Keskus >
keha >
< stsenaarium >
$ ( 'nupp' ) .klõpsake ( alertId ( $ ( see ) .attr ( 'id' ) ) ) ;
funktsiooni alertId ( id ) {
hoiatus ( id )
}
stsenaarium >
html >
Samuti saame kasutada peal() meetod sündmuste käitlejate kinnitamiseks elementidele. The peal() meetod võtab argumendina vähemalt ühe sündmuse koos mõne muu valikulise argumendiga:
< html >
< keha >
< Keskus >
< div stiilis = 'margin-top: 50px;' >
< h2 > Klõpsake ühte järgmistest nuppudest h2 >
< nuppu id = 'button_one' stiilis = 'laius: 100 pikslit; kõrgus: 40 pikslit; veeris-parem: 10 pikslit;' onclick = 'alertId(this.id)' > 1 nuppu >
< nuppu id = 'nupp_kaks' stiilis = 'laius: 100 pikslit; kõrgus: 40 pikslit;' onclick = 'alertId(this.id)' > kaks nuppu >
div >
Keskus >
keha >
< stsenaarium >
$ ( 'nupp' ) .peal ( 'klõps' , alertId ( $ ( see ) .attr ( 'id' ) ) ) ;
funktsiooni alertId ( id ) {
hoiatus ( id )
}
stsenaarium >
html >
Järeldus
Klõpsatud nupu ID-le pääseb juurde nii tavalise JavaScripti kui ka jQuery kaudu. Arutasime nelja sellist meetodit ning andsime selles kirjutises põhjalikud üksikasjad ja asjakohased näited.