Tutoriel jQuery : appliquer un événement sur plusieurs éléments
Le contexte
Imaginons que vous devez appliquer le même comportement d’événement à un ensemble d’éléments, il devient alors tout à fait naturel de créer une classe CSS qui permettra d’identifier tous les éléments et ainsi leur appliquer le comportement d’événement simultanément.
Ceci ce traduirait par le code jQuery ci-dessous (notez que j’utilise jQuery à la place de $ pour des questions de compatibilité avec d’autres librairies) :
jQuery('.jQuery-elements-1').change(function(e){
//traitement de l'événement
});
Le problème
Le code que nous venons de voir fonctionne bien, en revanche comment appliquer ce même comportement à un second ensemble d’éléments sans pour autant dupliquer de code ? Imaginons maintenant que nous possédons un second ensemble d’éléments portant pour une raison quelconque une classe CSS différente mais pour lequel nous désirons le même comportement d’événement.
La première solution qui vient à l’esprit consiste à dupliquer le code précédemment vu et à modifier la classe CSS utilisée pour pointer les éléments. C’est là qu’un peu d’astuce vas nous permettre d’éviter cette dupplication ! En effet, jQuery possède un puissant système de sélecteurs permettant de cibler des éléments HTML,en l’occurrence il suffira de séparer les deux classes CSS par une virgule pour appliquer le comportement d’événements à tous les éléments d’un seul coup !
jQuery('.jQuery-elements-1, .jQuery-elements-2').change(function(e){
//traitement de l'événement
});
Pratique, n’est-ce pas ?
