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 ?

Articles associés

PrestaShop Tour Montpellier

PrestaShop Tour Montpellier

Nukium est sponsor du PrestaShop Tour Montpellier 2023 Le PrestaShop Tour fait escale à Montpellier le 16 novembre 2023, et Nukium est fier d’en être l’un des sponsors principaux aux côtés de Payplug et Axeptio. Cette soirée, dédiée à l’écosystème e-commerce, sera l’occasion pour notre équipe de partager son expertise, de rencontrer la communauté PrestaShop locale et de discuter des dernières tendances du secteur. Rendez-vous à The Island à partir de 19h00 pour célébrer la puissance du e-commerce et découvrir

Lire la suite
PrestaShop ecommerce week 2020

Facebook Shops & PrestaShop

Une intégration entre le CMS et le réseau social déjà en cours de préparation ? L’annonce a été faites par le CEO de PrestaShop lors de la session de conférences PrestaShop (e)Commerce Week qui se déroule du 29 juin au 3 juillet 2020. Lors de la Keynote : « Towards a unified commerce without frontiers » Alexandre Eruimy a évoqué la nouvelle solution e-commerce qui sera bientôt proposée en natif par le réseau social : Facebook Shops. Ce nouvel outil de la

Lire la suite