Parfois, un développeur doit connaître l'ID du bouton sur lequel l'utilisateur a cliqué pour décider de la marche à suivre sur une page Web. Comme vous le verrez dans cet article, cela peut être fait à la fois via JavaScript vanille et jQuery. Alors, commençons :
Tout d'abord, nous allons créer une page Web HTML simple comportant deux boutons au centre de la page :
< ! DOCTYPE html >
< html >
< corps >
< centre >
< div style = 'marge-haut : 50px ;' >
< h2 > Cliquez sur l'un des boutons suivants h2 >
< bouton identifiant = 'bouton_un' style = 'largeur : 100 px ; hauteur : 40 px ; marge droite : 10 px ;' > 1 bouton >
< bouton identifiant = 'bouton_deux' style = 'largeur : 100 px ; hauteur : 40 px ;' > deux bouton >
div >
centre >
corps >
html >
Comment obtenir l'ID du bouton cliqué à l'aide de JavaScript ?
Nous pouvons obtenir l'ID du bouton cliqué en utilisant JavaScript de plusieurs manières différentes. Dans notre première méthode, nous obtiendrons la liste de nœuds de toutes les balises de bouton et les stockerons dans une variable. Ensuite, nous allons parcourir la nodelist pour obtenir l'ID du bouton qui a été cliqué :
< scénario >
var boutons = document.getElementsByTagName ( 'bouton' ) ;
pour ( laisser indice = 0 ; indice < boutons.longueur ; index++ ) {
boutons [ indice ] .onclick = fonction ( ) {
alerte ( this.id ) ;
}
}
scénario >
Nous pouvons également configurer chaque bouton avec sur clic événement individuellement :
< ! DOCTYPE html >
< html >
< corps >
< centre >
< div style = 'marge-haut : 50px ;' >
< h2 > Cliquez sur l'un des boutons suivants h2 >
< bouton identifiant = 'bouton_un' style = 'largeur : 100 px ; hauteur : 40 px ; marge droite : 10 px ;' sur clic = 'alertId(this.id)' > 1 bouton >
< bouton identifiant = 'bouton_deux' style = 'largeur : 100 px ; hauteur : 40 px ;' sur clic = 'alertId(this.id)' > deux bouton >
div >
centre >
corps >
< scénario >
fonction alertId ( identifiant ) {
alerte ( identifiant )
}
scénario >
html >
Comment obtenir l'ID du bouton cliqué à l'aide de jQuery ?
jQuery a également plusieurs méthodes différentes qui peuvent être utilisées pour obtenir l'ID d'un bouton cliqué. Nous allons commencer par le Cliquez sur() qui est appliquée sur un sélecteur et prend un nom de fonction comme argument facultatif :
< ! DOCTYPE html >
< html >
< corps >
< centre >
< div style = 'marge-haut : 50px ;' >
< h2 > Cliquez sur l'un des boutons suivants h2 >
< bouton identifiant = 'bouton_un' style = 'largeur : 100 px ; hauteur : 40 px ; marge droite : 10 px ;' sur clic = 'alertId(this.id)' > 1 bouton >
< bouton identifiant = 'bouton_deux' style = 'largeur : 100 px ; hauteur : 40 px ;' sur clic = 'alertId(this.id)' > deux bouton >
div >
centre >
corps >
< scénario >
$ ( 'bouton' ) .Cliquez sur ( alertId ( $ ( cette ) .attr ( 'identifiant' ) ) ) ;
fonction alertId ( identifiant ) {
alerte ( identifiant )
}
scénario >
html >
Nous pouvons également utiliser le sur() méthode pour attacher des gestionnaires d'événements aux éléments. La sur() prend au moins un événement comme argument avec quelques autres arguments facultatifs :
< html >
< corps >
< centre >
< div style = 'marge-haut : 50px ;' >
< h2 > Cliquez sur l'un des boutons suivants h2 >
< bouton identifiant = 'bouton_un' style = 'largeur : 100 px ; hauteur : 40 px ; marge droite : 10 px ;' sur clic = 'alertId(this.id)' > 1 bouton >
< bouton identifiant = 'bouton_deux' style = 'largeur : 100 px ; hauteur : 40 px ;' sur clic = 'alertId(this.id)' > deux bouton >
div >
centre >
corps >
< scénario >
$ ( 'bouton' ) .sur ( 'Cliquez sur' , alertId ( $ ( cette ) .attr ( 'identifiant' ) ) ) ;
fonction alertId ( identifiant ) {
alerte ( identifiant )
}
scénario >
html >
Conclusion
L'ID d'un bouton cliqué est accessible via JavaScript et jQuery. Nous avons discuté de quatre de ces méthodes et donné des détails approfondis et des exemples pertinents dans cet article.