Czasami programista musi znać identyfikator przycisku, który kliknął użytkownik, aby zdecydować o dalszym postępowaniu na stronie. Jak zobaczysz w tym artykule, można to zrobić zarówno za pomocą waniliowego JavaScript, jak i jQuery. Zacznijmy więc:
Najpierw utworzymy prostą stronę HTML, która ma dwa przyciski na środku strony:
DOCTYPE html >
< html >
< ciało >
< środek >
< div styl = 'górny margines: 50px;' >
< h2 > Kliknij jeden z poniższych przycisków h2 >
< przycisk ID = „przycisk_jeden” styl = 'szerokość: 100px; wysokość:40px; margines prawy: 10px;' > 1 przycisk >
< przycisk ID = „przycisk_dwa” styl = 'szerokość: 100px; wysokość:40px;' > dwa przycisk >
div >
środek >
ciało >
html >
Jak uzyskać identyfikator klikniętego przycisku za pomocą JavaScript?
Identyfikator klikniętego przycisku możemy uzyskać za pomocą JavaScript na kilka różnych sposobów. W naszej pierwszej metodzie otrzymamy listę węzłów wszystkich znaczników przycisków i zapiszemy je w zmiennej. Następnie będziemy iterować po liście węzłów, aby uzyskać identyfikator przycisku, który został kliknięty:
< scenariusz >
var buttons = document.getElementsByTagName ( 'przycisk' ) ;
dla ( wynajmować indeks = 0 ; indeks < guziki.długość; indeks++ ) {
guziki [ indeks ] .onclick = funkcjonować ( ) {
alarm ( this.id ) ;
}
}
scenariusz >
Możemy również skonfigurować każdy przycisk za pomocą na kliknięcie wydarzenie indywidualnie:
DOCTYPE html >
< html >
< ciało >
< środek >
< div styl = 'górny margines: 50px;' >
< h2 > Kliknij jeden z poniższych przycisków h2 >
< przycisk ID = „przycisk_jeden” styl = 'szerokość: 100px; wysokość:40px; margines prawy: 10px;' na kliknięcie = „identyfikator alertu(ten.id)” > 1 przycisk >
< przycisk ID = „przycisk_dwa” styl = 'szerokość: 100px; wysokość:40px;' na kliknięcie = „identyfikator alertu(ten.id)” > dwa przycisk >
div >
środek >
ciało >
< scenariusz >
funkcjonować identyfikator alertu ( ID ) {
alarm ( ID )
}
scenariusz >
html >
Jak uzyskać identyfikator klikniętego przycisku za pomocą jQuery?
jQuery ma również kilka różnych metod, które można wykorzystać do uzyskania identyfikatora klikniętego przycisku. Zaczniemy od Kliknij() metoda, która jest zastosowana do selektora i przyjmuje nazwę funkcji jako opcjonalny argument:
DOCTYPE html >
< html >
< ciało >
< środek >
< div styl = 'górny margines: 50px;' >
< h2 > Kliknij jeden z poniższych przycisków h2 >
< przycisk ID = „przycisk_jeden” styl = 'szerokość: 100px; wysokość:40px; margines prawy: 10px;' na kliknięcie = „identyfikator alertu(ten.id)” > 1 przycisk >
< przycisk ID = „przycisk_dwa” styl = 'szerokość: 100px; wysokość:40px;' na kliknięcie = „identyfikator alertu(ten.id)” > dwa przycisk >
div >
środek >
ciało >
< scenariusz >
$ ( 'przycisk' ) .Kliknij ( identyfikator alertu ( $ ( ten ) .atr ( 'ID' ) ) ) ;
funkcjonować identyfikator alertu ( ID ) {
alarm ( ID )
}
scenariusz >
html >
Możemy również użyć na() metoda dołączania obsługi zdarzeń do elementów. The na() metoda przyjmuje co najmniej jedno zdarzenie jako argument wraz z kilkoma innymi opcjonalnymi argumentami:
< html >
< ciało >
< środek >
< div styl = 'górny margines: 50px;' >
< h2 > Kliknij jeden z poniższych przycisków h2 >
< przycisk ID = „przycisk_jeden” styl = 'szerokość: 100px; wysokość:40px; margines prawy: 10px;' na kliknięcie = „identyfikator alertu(ten.id)” > 1 przycisk >
< przycisk ID = „przycisk_dwa” styl = 'szerokość: 100px; wysokość:40px;' na kliknięcie = „identyfikator alertu(ten.id)” > dwa przycisk >
div >
środek >
ciało >
< scenariusz >
$ ( 'przycisk' ) .na ( 'Kliknij' , identyfikator alertu ( $ ( ten ) .atr ( 'ID' ) ) ) ;
funkcjonować identyfikator alertu ( ID ) {
alarm ( ID )
}
scenariusz >
html >
Wniosek
Dostęp do identyfikatora klikniętego przycisku można uzyskać zarówno za pomocą zwykłego JavaScript, jak i jQuery. Omówiliśmy cztery takie metody i podaliśmy w tym artykule szczegółowe informacje oraz odpowiednie przykłady.