Ponekad razvojni programer mora znati ID gumba koji je korisnik kliknuo kako bi odlučio o daljnjem tijeku radnje na web stranici. Kao što ćete vidjeti u ovom tekstu, to se može učiniti i putem vanilla JavaScripta i jQueryja. Dakle, počnimo:
Prvo ćemo izraditi jednostavnu HTML web stranicu koja ima dva gumba u sredini stranice:
DOCTYPE html >
< html >
< tijelo >
< centar >
< div stil = 'margin-top: 50px;' >
< h2 > Pritisnite jedan od sljedećih gumba h2 >
< dugme iskaznica = 'gumb_jedan' stil = 'width: 100px; height:40px; margin-desno: 10px;' > 1 dugme >
< dugme iskaznica = 'gumb_dva' stil = 'width: 100px; height:40px;' > dva dugme >
div >
centar >
tijelo >
html >
Kako dohvatiti ID kliknutog gumba pomoću JavaScripta?
ID gumba na koji smo kliknuli možemo dobiti koristeći JavaScript na nekoliko različitih metoda. U našoj prvoj metodi, dobit ćemo popis čvorova svih oznaka gumba i pohraniti ih unutar varijable. Zatim ćemo iterirati po popisu čvorova kako bismo dobili ID gumba koji je kliknut:
< skripta >
var buttons = document.getElementsByTagName ( 'dugme' ) ;
za ( neka indeks = 0 ; indeks < gumbi.duljina; indeks++ ) {
gumbi [ indeks ] .onclick = funkcija ( ) {
uzbuna ( ovo.id ) ;
}
}
skripta >
Također možemo postaviti svaki gumb s na klik događaj pojedinačno:
DOCTYPE html >
< html >
< tijelo >
< centar >
< div stil = 'margin-top: 50px;' >
< h2 > Pritisnite jedan od sljedećih gumba h2 >
< dugme iskaznica = 'gumb_jedan' stil = 'width: 100px; height:40px; margin-desno: 10px;' na klik = 'AlertId(this.id)' > 1 dugme >
< dugme iskaznica = 'gumb_dva' stil = 'width: 100px; height:40px;' na klik = 'AlertId(this.id)' > dva dugme >
div >
centar >
tijelo >
< skripta >
funkcija alertId ( iskaznica ) {
uzbuna ( iskaznica )
}
skripta >
html >
Kako dobiti ID kliknutog gumba pomoću jQueryja?
jQuery također ima nekoliko različitih metoda koje se mogu koristiti za dobivanje ID-a kliknutog gumba. Počet ćemo s klik() metoda koja se primjenjuje na selektor i uzima naziv funkcije kao izborni argument:
DOCTYPE html >
< html >
< tijelo >
< centar >
< div stil = 'margin-top: 50px;' >
< h2 > Pritisnite jedan od sljedećih gumba h2 >
< dugme iskaznica = 'gumb_jedan' stil = 'width: 100px; height:40px; margin-desno: 10px;' na klik = 'AlertId(this.id)' > 1 dugme >
< dugme iskaznica = 'gumb_dva' stil = 'width: 100px; height:40px;' na klik = 'AlertId(this.id)' > dva dugme >
div >
centar >
tijelo >
< skripta >
$ ( 'dugme' ) .klik ( alertId ( $ ( ovaj ) .attr ( 'iskaznica' ) ) ) ;
funkcija alertId ( iskaznica ) {
uzbuna ( iskaznica )
}
skripta >
html >
Također možemo koristiti na() metoda za pripajanje rukovatelja događajima elementima. The na() metoda uzima barem jedan događaj kao argument zajedno s nekim drugim neobaveznim argumentima:
< html >
< tijelo >
< centar >
< div stil = 'margin-top: 50px;' >
< h2 > Pritisnite jedan od sljedećih gumba h2 >
< dugme iskaznica = 'gumb_jedan' stil = 'width: 100px; height:40px; margin-desno: 10px;' na klik = 'AlertId(this.id)' > 1 dugme >
< dugme iskaznica = 'gumb_dva' stil = 'width: 100px; height:40px;' na klik = 'AlertId(this.id)' > dva dugme >
div >
centar >
tijelo >
< skripta >
$ ( 'dugme' ) .na ( 'klik' , ID upozorenja ( $ ( ovaj ) .attr ( 'iskaznica' ) ) ) ;
funkcija alertId ( iskaznica ) {
uzbuna ( iskaznica )
}
skripta >
html >
Zaključak
ID-u kliknutog gumba može se pristupiti putem običnog JavaScripta i jQueryja. Raspravljali smo o četiri takve metode i dali detaljne pojedinosti i relevantne primjere u ovom tekstu.