Dažreiz izstrādātājam ir jāzina tās pogas ID, uz kuras lietotājs ir noklikšķinājis, lai izlemtu, kā rīkoties tīmekļa lapā. Kā redzēsit šajā rakstā, to var izdarīt, izmantojot gan vaniļas JavaScript, gan jQuery. Tātad, sāksim:
Pirmkārt, mēs izveidosim vienkāršu HTML tīmekļa lapu, kuras centrā ir divas pogas:
DOCTYPE html >
< html >
< ķermenis >
< centrs >
< div stils = 'margin-top: 50px;' >
< h2 > Noklikšķiniet uz vienas no tālāk norādītajām pogām h2 >
< pogu id = 'button_one' stils = 'platums: 100 pikseļi; augstums: 40 pikseļi; mala pa labi: 10 pikseļi;' > 1 pogu >
< pogu id = 'poga_otra' stils = 'platums: 100 pikseļi; augstums: 40 pikseļi;' > divi pogu >
div >
centrs >
ķermenis >
html >
Kā iegūt noklikšķinātās pogas ID, izmantojot JavaScript?
Mēs varam iegūt noklikšķinātās pogas ID, izmantojot JavaScript vairākās dažādās metodēs. Pirmajā metodē mēs iegūsim visu pogu tagu mezglu sarakstu un saglabāsim tos mainīgajā. Pēc tam mēs atkārtosim mezglu sarakstu, lai iegūtu tās pogas ID, uz kuras tika noklikšķināts:
< skripts >
var pogas = document.getElementsByTagName ( 'poga' ) ;
priekš ( ļaut indekss = 0 ; rādītājs < pogas.garums; indekss++ ) {
pogas [ rādītājs ] .onclick = funkciju ( ) {
brīdinājums ( šis.id ) ;
}
}
skripts >
Mēs varam arī iestatīt katru pogu ar onclick pasākums individuāli:
DOCTYPE html >
< html >
< ķermenis >
< centrs >
< div stils = 'margin-top: 50px;' >
< h2 > Noklikšķiniet uz vienas no tālāk norādītajām pogām h2 >
< pogu id = 'button_one' stils = 'platums: 100 pikseļi; augstums: 40 pikseļi; mala pa labi: 10 pikseļi;' onclick = 'alertId(this.id)' > 1 pogu >
< pogu id = 'poga_otra' stils = 'platums: 100 pikseļi; augstums: 40 pikseļi;' onclick = 'alertId(this.id)' > divi pogu >
div >
centrs >
ķermenis >
< skripts >
funkciju alertId ( id ) {
brīdinājums ( id )
}
skripts >
html >
Kā iegūt noklikšķinātās pogas ID, izmantojot jQuery?
jQuery ir arī vairākas dažādas metodes, kuras var izmantot, lai iegūtu noklikšķinātās pogas ID. Mēs sāksim ar klikšķis() metode, kas tiek lietota atlasītājam un kā izvēles arguments tiek izmantots funkcijas nosaukums:
DOCTYPE html >
< html >
< ķermenis >
< centrs >
< div stils = 'margin-top: 50px;' >
< h2 > Noklikšķiniet uz vienas no tālāk norādītajām pogām h2 >
< pogu id = 'button_one' stils = 'platums: 100 pikseļi; augstums: 40 pikseļi; mala pa labi: 10 pikseļi;' onclick = 'alertId(this.id)' > 1 pogu >
< pogu id = 'poga_otra' stils = 'platums: 100 pikseļi; augstums: 40 pikseļi;' onclick = 'alertId(this.id)' > divi pogu >
div >
centrs >
ķermenis >
< skripts >
$ ( 'poga' ) .klikšķis ( alertId ( $ ( šis ) .attr ( 'id' ) ) ) ;
funkciju alertId ( id ) {
brīdinājums ( id )
}
skripts >
html >
Mēs varam izmantot arī uz () metode notikumu apstrādātāju pievienošanai elementiem. The uz () metode izmanto vismaz vienu notikumu kā argumentu kopā ar dažiem citiem izvēles argumentiem:
< html >
< ķermenis >
< centrs >
< div stils = 'margin-top: 50px;' >
< h2 > Noklikšķiniet uz vienas no tālāk norādītajām pogām h2 >
< pogu id = 'button_one' stils = 'platums: 100 pikseļi; augstums: 40 pikseļi; mala pa labi: 10 pikseļi;' onclick = 'alertId(this.id)' > 1 pogu >
< pogu id = 'poga_otra' stils = 'platums: 100 pikseļi; augstums: 40 pikseļi;' onclick = 'alertId(this.id)' > divi pogu >
div >
centrs >
ķermeni >
< skripts >
$ ( 'poga' ) .ieslēgts ( 'klikšķis' , AlertId ( $ ( šis ) .attr ( 'id' ) ) ) ;
funkciju alertId ( id ) {
brīdinājums ( id )
}
skripts >
html >
Secinājums
Noklikšķinātās pogas ID var piekļūt, izmantojot gan vienkāršu JavaScript, gan jQuery. Mēs apspriedām četras šādas metodes un sniedzām padziļinātu informāciju un atbilstošus piemērus šajā rakstā.