Kartais kūrėjas turi žinoti mygtuko, kurį vartotojas spustelėjo, ID, kad galėtų nuspręsti, ką daryti tinklalapyje. Kaip matysite šiame rašte, tai galima padaryti naudojant „vanilla JavaScript“ ir „jQuery“. Taigi, pradėkime:
Pirmiausia sukursime paprastą HTML tinklalapį, kurio centre yra du mygtukai:
DOCTYPE html >
< html >
< kūnas >
< centras >
< div stilius = 'margin-top: 50px;' >
< h2 > Spustelėkite vieną iš šių mygtukų h2 >
< mygtuką id = 'button_one' stilius = 'plotis: 100 piks.; aukštis: 40 piks.; paraštė dešinėje: 10 piks.;' > 1 mygtuką >
< mygtuką id = 'button_wo' stilius = 'plotis: 100 piks.; aukštis: 40 piks.;' > du mygtuką >
div >
centras >
kūnas >
html >
Kaip gauti paspausto mygtuko ID naudojant „JavaScript“?
Spustelėto mygtuko ID galime gauti naudodami „JavaScript“ keliais skirtingais būdais. Pirmuoju metodu gausime visų mygtukų žymų mazgų sąrašą ir išsaugosime jas kintamajame. Tada pakartosime mazgų sąrašą, kad gautume paspausto mygtuko ID:
< scenarijus >
var buttons = document.getElementsByTagName ( 'mygtukas' ) ;
dėl ( leisti indeksas = 0 ; indeksas < mygtukai.ilgis; indeksas++ ) {
mygtukai [ indeksas ] .onclick = funkcija ( ) {
budrus ( tai.id ) ;
}
}
scenarijus >
Taip pat galime nustatyti kiekvieną mygtuką paspaudus renginys individualiai:
DOCTYPE html >
< html >
< kūnas >
< centras >
< div stilius = 'margin-top: 50px;' >
< h2 > Spustelėkite vieną iš šių mygtukų h2 >
< mygtuką id = 'button_one' stilius = 'plotis: 100 piks.; aukštis: 40 piks.; paraštė dešinėje: 10 piks.;' paspaudus = 'alertId(this.id)' > 1 mygtuką >
< mygtuką id = 'button_wo' stilius = 'plotis: 100 piks.; aukštis: 40 piks.;' paspaudus = 'alertId(this.id)' > du mygtuką >
div >
centras >
kūnas >
< scenarijus >
funkcija alertId ( id ) {
budrus ( id )
}
scenarijus >
html >
Kaip gauti paspausto mygtuko ID naudojant „jQuery“?
„jQuery“ taip pat turi keletą skirtingų metodų, kuriuos galima naudoti norint gauti spustelėto mygtuko ID. Pradėsime nuo spustelėkite () metodas, kuris taikomas parinkikliui ir pasirenka funkcijos pavadinimą kaip pasirenkamą argumentą:
DOCTYPE html >
< html >
< kūnas >
< centras >
< div stilius = 'margin-top: 50px;' >
< h2 > Spustelėkite vieną iš šių mygtukų h2 >
< mygtuką id = 'button_one' stilius = 'plotis: 100 piks.; aukštis: 40 piks.; paraštė dešinėje: 10 piks.;' paspaudus = 'alertId(this.id)' > 1 mygtuką >
< mygtuką id = 'button_wo' stilius = 'plotis: 100 piks.; aukštis: 40 piks.;' paspaudus = 'alertId(this.id)' > du mygtuką >
div >
centras >
kūnas >
< scenarijus >
$ ( 'mygtukas' ) .spustelėkite ( alertId ( $ ( tai ) .attr ( 'id' ) ) ) ;
funkcija alertId ( id ) {
budrus ( id )
}
scenarijus >
html >
Taip pat galime naudoti ant () būdas pritvirtinti įvykių tvarkykles prie elementų. The ant () metodas naudoja bent vieną įvykį kaip argumentą kartu su kai kuriais kitais pasirenkamais argumentais:
< html >
< kūnas >
< centras >
< div stilius = 'margin-top: 50px;' >
< h2 > Spustelėkite vieną iš šių mygtukų h2 >
< mygtuką id = 'button_one' stilius = 'plotis: 100 piks.; aukštis: 40 piks.; paraštė dešinėje: 10 piks.;' paspaudus = 'alertId(this.id)' > 1 mygtuką >
< mygtuką id = 'button_wo' stilius = 'plotis: 100 piks.; aukštis: 40 piks.;' paspaudus = 'alertId(this.id)' > du mygtuką >
div >
centras >
kūnas >
< scenarijus >
$ ( 'mygtukas' ) .įjungta ( 'spustelėkite' , alertId ( $ ( tai ) .attr ( 'id' ) ) ) ;
funkcija alertId ( id ) {
budrus ( id )
}
scenarijus >
html >
Išvada
Spustelėto mygtuko ID galima pasiekti naudojant paprastą JavaScript ir jQuery. Šiame rašte aptarėme keturis tokius metodus ir pateikėme išsamią informaciją bei atitinkamus pavyzdžius.