Μερικές φορές, ένας προγραμματιστής πρέπει να γνωρίζει το αναγνωριστικό του κουμπιού στο οποίο ο χρήστης έχει κάνει κλικ για να αποφασίσει περαιτέρω ενέργειες σε μια ιστοσελίδα. Όπως θα δείτε σε αυτήν την εγγραφή, αυτό μπορεί να γίνει τόσο μέσω vanilla JavaScript όσο και μέσω jQuery. Λοιπόν, ας ξεκινήσουμε:
Αρχικά, θα δημιουργήσουμε μια απλή ιστοσελίδα HTML που έχει δύο κουμπιά στο κέντρο της σελίδας:
DOCTYPE html >
< html >
< σώμα >
< κέντρο >
< div στυλ = 'margin-top: 50px;' >
< h2 > Κάντε κλικ σε ένα από τα παρακάτω κουμπιά h2 >
< κουμπί ταυτότητα = 'κουμπί_ένα' στυλ = 'πλάτος: 100 εικονοστοιχεία; ύψος: 40 εικονοστοιχεία; δεξιό περιθώριο: 10 εικονοστοιχεία;' > 1 κουμπί >
< κουμπί ταυτότητα = 'button_two' στυλ = 'πλάτος: 100 εικονοστοιχεία; ύψος: 40 εικονοστοιχεία;' > δύο κουμπί >
div >
κέντρο >
σώμα >
html >
Πώς να αποκτήσετε το αναγνωριστικό του κουμπιού στο οποίο έγινε κλικ χρησιμοποιώντας JavaScript;
Μπορούμε να λάβουμε το αναγνωριστικό του κουμπιού στο οποίο πατήθηκε χρησιμοποιώντας JavaScript με πολλές διαφορετικές μεθόδους. Στην πρώτη μας μέθοδο, θα λάβουμε τη λίστα κόμβων όλων των ετικετών κουμπιών και θα τις αποθηκεύσουμε μέσα σε μια μεταβλητή. Στη συνέχεια, θα επαναλάβουμε τη λίστα κόμβων για να λάβουμε το αναγνωριστικό του κουμπιού στο οποίο έχει γίνει κλικ:
< γραφή >
var buttons = document.getElementsByTagName ( 'κουμπί' ) ;
Για ( αφήνω ευρετήριο = 0 ; δείκτης < κουμπιά.μήκος? ευρετήριο++ ) {
κουμπιά [ δείκτης ] .onclick = λειτουργία ( ) {
συναγερμός ( αυτό.id ) ;
}
}
γραφή >
Μπορούμε επίσης να ρυθμίσουμε κάθε κουμπί με στο κλικ εκδήλωση μεμονωμένα:
DOCTYPE html >
< html >
< σώμα >
< κέντρο >
< div στυλ = 'margin-top: 50px;' >
< h2 > Κάντε κλικ σε ένα από τα παρακάτω κουμπιά h2 >
< κουμπί ταυτότητα = 'κουμπί_ένα' στυλ = 'πλάτος: 100 εικονοστοιχεία; ύψος: 40 εικονοστοιχεία; δεξιό περιθώριο: 10 εικονοστοιχεία;' στο κλικ = 'alertId(this.id)' > 1 κουμπί >
< κουμπί ταυτότητα = 'button_two' στυλ = 'πλάτος: 100 εικονοστοιχεία; ύψος: 40 εικονοστοιχεία;' στο κλικ = 'alertId(this.id)' > δύο κουμπί >
div >
κέντρο >
σώμα >
< γραφή >
λειτουργία alertId ( ταυτότητα ) {
συναγερμός ( ταυτότητα )
}
γραφή >
html >
Πώς να αποκτήσετε το αναγνωριστικό του κουμπιού στο οποίο έγινε κλικ χρησιμοποιώντας το jQuery;
Το jQuery έχει επίσης πολλές διαφορετικές μεθόδους που μπορούν να χρησιμοποιηθούν για να λάβετε το αναγνωριστικό ενός κουμπιού στο οποίο κάνετε κλικ. Θα ξεκινήσουμε με το Κάντε κλικ() μέθοδος που εφαρμόζεται σε έναν επιλογέα και παίρνει ένα όνομα συνάρτησης ως προαιρετικό όρισμα:
DOCTYPE html >
< html >
< σώμα >
< κέντρο >
< div στυλ = 'margin-top: 50px;' >
< h2 > Κάντε κλικ σε ένα από τα παρακάτω κουμπιά h2 >
< κουμπί ταυτότητα = 'κουμπί_ένα' στυλ = 'πλάτος: 100 εικονοστοιχεία; ύψος: 40 εικονοστοιχεία; δεξιό περιθώριο: 10 εικονοστοιχεία;' στο κλικ = 'alertId(this.id)' > 1 κουμπί >
< κουμπί ταυτότητα = 'button_two' στυλ = 'πλάτος: 100 εικονοστοιχεία; ύψος: 40 εικονοστοιχεία;' στο κλικ = 'alertId(this.id)' > δύο κουμπί >
div >
κέντρο >
σώμα >
< γραφή >
$ ( 'κουμπί' ) .Κάντε κλικ ( alertId ( $ ( Αυτό ) .attr ( 'ταυτότητα' ) ) ) ;
λειτουργία alertId ( ταυτότητα ) {
συναγερμός ( ταυτότητα )
}
γραφή >
html >
Μπορούμε επίσης να χρησιμοποιήσουμε το επί() μέθοδος για να προσαρτήσετε προγράμματα χειρισμού συμβάντων σε στοιχεία. ο επί() Η μέθοδος παίρνει τουλάχιστον ένα συμβάν ως όρισμα μαζί με κάποια άλλα προαιρετικά ορίσματα:
< html >
< σώμα >
< κέντρο >
< div στυλ = 'margin-top: 50px;' >
< h2 > Κάντε κλικ σε ένα από τα παρακάτω κουμπιά h2 >
< κουμπί ταυτότητα = 'κουμπί_ένα' στυλ = 'πλάτος: 100 εικονοστοιχεία; ύψος: 40 εικονοστοιχεία; δεξιό περιθώριο: 10 εικονοστοιχεία;' στο κλικ = 'alertId(this.id)' > 1 κουμπί >
< κουμπί ταυτότητα = 'button_two' στυλ = 'πλάτος: 100 εικονοστοιχεία; ύψος: 40 εικονοστοιχεία;' στο κλικ = 'alertId(this.id)' > δύο κουμπί >
div >
κέντρο >
σώμα >
< γραφή >
$ ( 'κουμπί' ) .επί ( 'Κάντε κλικ' , alertId ( $ ( Αυτό ) .attr ( 'ταυτότητα' ) ) ) ;
λειτουργία alertId ( ταυτότητα ) {
συναγερμός ( ταυτότητα )
}
γραφή >
html >
συμπέρασμα
Το αναγνωριστικό ενός κουμπιού στο οποίο γίνεται κλικ μπορεί να προσπελαστεί τόσο μέσω απλής JavaScript όσο και μέσω jQuery. Συζητήσαμε τέσσερις τέτοιες μεθόδους και δώσαμε σε βάθος λεπτομέρειες και σχετικά παραδείγματα σε αυτήν την καταγραφή.