Jak získat ID kliknutého tlačítka pomocí JavaScriptu/jQuery?

Jak Ziskat Id Kliknuteho Tlacitka Pomoci Javascriptu Jquery



Někdy musí vývojář znát ID tlačítka, na které uživatel klikl, aby rozhodl o dalším postupu na webové stránce. Jak uvidíte v tomto zápisu, lze to provést pomocí vanilkového JavaScriptu i jQuery. Takže, začněme:

Nejprve vytvoříme jednoduchou HTML webovou stránku, která má dvě tlačítka uprostřed stránky:







DOCTYPE html >
< html >
< tělo >
< centrum >
< div styl = 'margin-top: 50px;' >
< h2 > Klepněte na jedno z následujících tlačítek h2 >
< knoflík id = 'button_one' styl = 'šířka: 100px; výška:40px; pravý okraj: 10px;' > 1 knoflík >
< knoflík id = 'tlačítko_dva' styl = 'width: 100px; height:40px;' > dva knoflík >
div >
centrum >
tělo >
html >




Jak získat ID kliknutého tlačítka pomocí JavaScriptu?

ID kliknutého tlačítka můžeme získat pomocí JavaScriptu několika různými metodami. V naší první metodě získáme seznam uzlů všech značek tlačítek a uložíme je do proměnné. Poté budeme iterovat přes seznam uzlů, abychom získali ID tlačítka, na které bylo kliknuto:



< skript >

var buttons = document.getElementsByTagName ( 'knoflík' ) ;
pro ( nechat index = 0 ; index < knoflíky.délka; index++ ) {
tlačítka [ index ] .onclick = funkce ( ) {
upozornění ( toto.id ) ;
}
}

skript >


Můžeme také nastavit každé tlačítko pomocí při kliknutí akce jednotlivě:





DOCTYPE html >
< html >
< tělo >
< centrum >
< div styl = 'margin-top: 50px;' >
< h2 > Klepněte na jedno z následujících tlačítek h2 >
< knoflík id = 'button_one' styl = 'šířka: 100px; výška:40px; pravý okraj: 10px;' při kliknutí = 'alertId(this.id)' > 1 knoflík >
< knoflík id = 'tlačítko_dva' styl = 'width: 100px; height:40px;' při kliknutí = 'alertId(this.id)' > dva knoflík >
div >
centrum >
tělo >
< skript >

funkce alertId ( id ) {
upozornění ( id )
}

skript >
html >




Jak získat ID kliknutého tlačítka pomocí jQuery?

jQuery má také několik různých metod, které lze použít k získání ID kliknutého tlačítka. Začneme s klikni() metoda, která je aplikována na selektor a má název funkce jako volitelný argument:



DOCTYPE html >
< html >
< tělo >
< centrum >
< div styl = 'margin-top: 50px;' >
< h2 > Klepněte na jedno z následujících tlačítek h2 >
< knoflík id = 'button_one' styl = 'šířka: 100px; výška:40px; pravý okraj: 10px;' při kliknutí = 'alertId(this.id)' > 1 knoflík >
< knoflík id = 'tlačítko_dva' styl = 'width: 100px; height:40px;' při kliknutí = 'alertId(this.id)' > dva knoflík >
div >
centrum >
tělo >
< skript >

$ ( 'knoflík' ) .klikněte ( alertId ( $ ( tento ) .attr ( 'id' ) ) ) ;

funkce alertId ( id ) {
upozornění ( id )
}

skript >
html >





Můžeme také použít na() metoda pro připojení obslužných rutin událostí k prvkům. The na() metoda bere alespoň jednu událost jako argument spolu s některými dalšími volitelnými argumenty:

DOCTYPE html >
< html >
< tělo >
< centrum >
< div styl = 'margin-top: 50px;' >
< h2 > Klepněte na jedno z následujících tlačítek h2 >
< knoflík id = 'button_one' styl = 'šířka: 100px; výška:40px; pravý okraj: 10px;' při kliknutí = 'alertId(this.id)' > 1 knoflík >
< knoflík id = 'tlačítko_dva' styl = 'width: 100px; height:40px;' při kliknutí = 'alertId(this.id)' > dva knoflík >
div >
centrum >
tělo >
< skript >

$ ( 'knoflík' ) .na ( 'kliknout' , alertId ( $ ( tento ) .attr ( 'id' ) ) ) ;

funkce alertId ( id ) {
upozornění ( id )
}

skript >
html >

Závěr

ID tlačítka, na které bylo kliknuto, je přístupné prostřednictvím prostého JavaScriptu i jQuery. Probrali jsme čtyři takové metody a v tomto zápisu jsme uvedli podrobné podrobnosti a relevantní příklady.