Néha a fejlesztőnek ismernie kell annak a gombnak az azonosítóját, amelyre a felhasználó rákattintott, hogy eldönthesse a weboldal további lépéseit. Amint az ebből az írásból látni fogja, ez a vanilla JavaScripten és a jQueryn keresztül is megtehető. Szóval, kezdjük:
Először létrehozunk egy egyszerű HTML weboldalt, amelynek két gombja van az oldal közepén:
DOCTYPE html >
< html >
< test >
< központ >
< div stílus = 'margin-top: 50px;' >
< h2 > Kattintson az alábbi gombok egyikére h2 >
< gomb id = 'button_one' stílus = 'szélesség: 100 képpont; magasság: 40 képpont; jobb margó: 10 képpont;' > 1 gomb >
< gomb id = 'kettős gomb' stílus = 'szélesség: 100 képpont; magasság: 40 képpont;' > két gomb >
div >
központ >
test >
html >
Hogyan szerezhető be a kattintott gomb azonosítója JavaScript használatával?
A kattintott gomb azonosítóját JavaScript segítségével többféle módszerrel is megkaphatjuk. Az első módszerünkben megkapjuk az összes gombcímke csomópontlistáját, és tároljuk őket egy változóban. Ezután ismételjük a csomópontlistát, hogy megkapjuk a kattintott gomb azonosítóját:
< forgatókönyv >
var buttons = document.getElementsByTagName ( 'gomb' ) ;
számára ( hagyja index = 0 ; index < gombok.hossz; index++ ) {
gombokat [ index ] .onclick = funkció ( ) {
éber ( ezt.id ) ;
}
}
forgatókönyv >
Az egyes gombokat ezzel is beállíthatjuk kattintásra rendezvény egyénileg:
DOCTYPE html >
< html >
< test >
< központ >
< div stílus = 'margin-top: 50px;' >
< h2 > Kattintson az alábbi gombok egyikére h2 >
< gomb id = 'button_one' stílus = 'szélesség: 100 képpont; magasság: 40 képpont; jobb margó: 10 képpont;' kattintásra = 'alertId(this.id)' > 1 gomb >
< gomb id = 'kettős gomb' stílus = 'szélesség: 100 képpont; magasság: 40 képpont;' kattintásra = 'alertId(this.id)' > két gomb >
div >
központ >
test >
< forgatókönyv >
funkció alertId ( id ) {
éber ( id )
}
forgatókönyv >
html >
Hogyan szerezhető be a kattintott gomb azonosítója a jQuery segítségével?
A jQuery számos különböző módszerrel is rendelkezik, amelyek segítségével lekérheti a kattintott gomb azonosítóját. Kezdjük a kattints() metódus, amely a választóra kerül alkalmazásra, és egy függvénynevet vesz fel opcionális argumentumként:
DOCTYPE html >
< html >
< test >
< központ >
< div stílus = 'margin-top: 50px;' >
< h2 > Kattintson az alábbi gombok egyikére h2 >
< gomb id = 'button_one' stílus = 'szélesség: 100 képpont; magasság: 40 képpont; jobb margó: 10 képpont;' kattintásra = 'alertId(this.id)' > 1 gomb >
< gomb id = 'kettős gomb' stílus = 'szélesség: 100 képpont; magasság: 40 képpont;' kattintásra = 'alertId(this.id)' > két gomb >
div >
központ >
test >
< forgatókönyv >
$ ( 'gomb' ) .kattintson ( alertId ( $ ( ez ) .attr ( 'azonosító' ) ) ) ;
funkció alertId ( id ) {
éber ( id )
}
forgatókönyv >
html >
Használhatjuk azt is tovább() módszer eseménykezelők elemekhez csatolására. Az tovább() A metódus legalább egy eseményt vesz fel argumentumként néhány egyéb opcionális argumentum mellett:
< html >
< test >
< központ >
< div stílus = 'margin-top: 50px;' >
< h2 > Kattintson az alábbi gombok egyikére h2 >
< gomb id = 'button_one' stílus = 'szélesség: 100 képpont; magasság: 40 képpont; jobb margó: 10 képpont;' kattintásra = 'alertId(this.id)' > 1 gomb >
< gomb id = 'kettős gomb' stílus = 'szélesség: 100 képpont; magasság: 40 képpont;' kattintásra = 'alertId(this.id)' > két gomb >
div >
központ >
test >
< forgatókönyv >
$ ( 'gomb' ) .tovább ( 'kattint' , alertId ( $ ( ez ) .attr ( 'azonosító' ) ) ) ;
funkció alertId ( id ) {
éber ( id )
}
forgatókönyv >
html >
Következtetés
A kattintott gomb azonosítója sima JavaScripten és jQueryn keresztül is elérhető. Négy ilyen módszert tárgyaltunk, és mélyreható részleteket és releváns példákat mutattunk be ebben az írásban.