Manchmal muss ein Entwickler die ID der Schaltfläche kennen, auf die der Benutzer geklickt hat, um über die weitere Vorgehensweise auf einer Webseite zu entscheiden. Wie Sie in diesem Artikel sehen werden, kann dies sowohl über Vanilla JavaScript als auch über jQuery erfolgen. Fangen wir also an:
Zuerst erstellen wir eine einfache HTML-Webseite mit zwei Schaltflächen in der Mitte der Seite:
DOCTYPE html >
< html >
< Karosserie >
< Center >
< div Stil = 'Rand oben: 50px;' >
< h2 > Klicken Sie auf eine der folgenden Schaltflächen h2 >
< Taste Ich würde = 'button_one' Stil = 'Breite: 100 Pixel; Höhe: 40 Pixel; Rand rechts: 10 Pixel;' > 1 Taste >
< Taste Ich würde = 'button_two' Stil = 'Breite: 100 Pixel; Höhe: 40 Pixel;' > zwei Taste >
div >
Center >
Karosserie >
html >
Wie erhalte ich die ID der angeklickten Schaltfläche mit JavaScript?
Wir können die ID der angeklickten Schaltfläche mithilfe von JavaScript auf verschiedene Weise erhalten. In unserer ersten Methode erhalten wir die Knotenliste aller Button-Tags und speichern sie in einer Variablen. Dann durchlaufen wir die Knotenliste, um die ID der Schaltfläche zu erhalten, auf die geklickt wurde:
< Skript >
var buttons = document.getElementsByTagName ( 'Taste' ) ;
zum ( Lassen Index = 0 ; Index < Knöpfe.Länge; index++ ) {
Tasten [ Index ] .onclick = Funktion ( ) {
Alarm ( diese.id ) ;
}
}
Skript >
Wir können auch jede Schaltfläche mit einrichten anklicken Veranstaltung einzeln:
DOCTYPE html >
< html >
< Karosserie >
< Center >
< div Stil = 'Rand oben: 50px;' >
< h2 > Klicken Sie auf eine der folgenden Schaltflächen h2 >
< Taste Ich würde = 'button_one' Stil = 'Breite: 100 Pixel; Höhe: 40 Pixel; Rand rechts: 10 Pixel;' anklicken = 'alertId(diese.id)' > 1 Taste >
< Taste Ich würde = 'button_two' Stil = 'Breite: 100 Pixel; Höhe: 40 Pixel;' anklicken = 'alertId(diese.id)' > zwei Taste >
div >
Center >
Karosserie >
< Skript >
Funktion Benachrichtigungs-ID ( Ich würde ) {
Alarm ( Ich würde )
}
Skript >
html >
Wie erhalte ich die ID der angeklickten Schaltfläche mit jQuery?
jQuery hat auch mehrere verschiedene Methoden, die verwendet werden können, um die ID einer angeklickten Schaltfläche zu erhalten. Wir beginnen mit der klicken() Methode, die auf einen Selektor angewendet wird und einen Funktionsnamen als optionales Argument akzeptiert:
DOCTYPE html >
< html >
< Karosserie >
< Center >
< div Stil = 'Rand oben: 50px;' >
< h2 > Klicken Sie auf eine der folgenden Schaltflächen h2 >
< Taste Ich würde = 'button_one' Stil = 'Breite: 100 Pixel; Höhe: 40 Pixel; Rand rechts: 10 Pixel;' anklicken = 'alertId(diese.id)' > 1 Taste >
< Taste Ich würde = 'button_two' Stil = 'Breite: 100 Pixel; Höhe: 40 Pixel;' anklicken = 'alertId(diese.id)' > zwei Taste >
div >
Center >
Karosserie >
< Skript >
$ ( 'Taste' ) .klicken ( Benachrichtigungs-ID ( $ ( Dies ) .attr ( 'Ich würde' ) ) ) ;
Funktion Benachrichtigungs-ID ( Ich würde ) {
Alarm ( Ich würde )
}
Skript >
html >
Wir können auch die verwenden an() -Methode, um Ereignishandler an Elemente anzuhängen. Das an() -Methode akzeptiert mindestens ein Ereignis als Argument zusammen mit einigen anderen optionalen Argumenten:
< html >
< Karosserie >
< Center >
< div Stil = 'Rand oben: 50px;' >
< h2 > Klicken Sie auf eine der folgenden Schaltflächen h2 >
< Taste Ich würde = 'button_one' Stil = 'Breite: 100 Pixel; Höhe: 40 Pixel; Rand rechts: 10 Pixel;' anklicken = 'alertId(diese.id)' > 1 Taste >
< Taste Ich würde = 'button_two' Stil = 'Breite: 100 Pixel; Höhe: 40 Pixel;' anklicken = 'alertId(diese.id)' > zwei Taste >
div >
Center >
Karosserie >
< Skript >
$ ( 'Taste' ) .an ( 'klicken' , Alarm-ID ( $ ( Dies ) .attr ( 'Ich würde' ) ) ) ;
Funktion Benachrichtigungs-ID ( Ich würde ) {
Alarm ( Ich würde )
}
Skript >
html >
Fazit
Auf die ID einer angeklickten Schaltfläche kann sowohl über einfaches JavaScript als auch über jQuery zugegriffen werden. Wir haben vier solcher Methoden diskutiert und in diesem Artikel detaillierte und relevante Beispiele gegeben.