jQuery même événement de clic pour plusieurs éléments

Existe-t-il un moyen d'exécuter le même code pour différents éléments de la page?

$('.class1').click(function() {
   some_function();
});

$('.class2').click(function() {
   some_function();
});

au lieu de faire quelque chose comme:

$('.class1').$('.class2').click(function() {
   some_function();
});

Merci

$('.class1, .class2').on('click', some_function);

Ou:

$('.class1').add('.class2').on('click', some_function);

Cela fonctionne également avec les objets existants:

const $class1 = $('.class1');
const $class2 = $('.class2');
$class1.add($class2).on('click', some_function);

J'utilise normalement onau lieu de click. Cela me permet d'ajouter plus d'auditeurs d'événements à une fonction spécifique.

$(document).on("click touchend", ".class1, .class2, .class3", function () {
     //do stuff
});

J'espère que cela aide!

$('.class1, .class2').click(some_function);

Assurez-vous de mettre un espace comme $ ('. Class1, space here.class2') sinon cela ne fonctionnera pas.

Utilisez simplement $('.myclass1, .myclass2, .myclass3')pour plusieurs sélecteurs. De plus, vous n'avez pas besoin de fonctions lambda pour lier une fonction existante à l'événement click.

Une autre alternative, en supposant que vos éléments sont stockés sous forme de variables (ce qui est souvent une bonne idée si vous y accédez plusieurs fois dans un corps de fonction):

function disableMinHeight() {
    var $html = $("html");
    var $body = $("body");
    var $slideout = $("#slideout");

    $html.add($body).add($slideout).css("min-height", 0);
};

Profite du chaînage jQuery et vous permet d'utiliser des références.

Si vous avez ou souhaitez conserver vos éléments en tant que variables (objets jQuery), vous pouvez également les boucler:

var $class1 = $('.class1');
var $class2 = $('.class2');

$([$class1,$class2]).each(function() {
    $(this).on('click', function(e) {
        some_function();
    });
});

Ajoutez une liste de classes séparées par des virgules comme ceci:

jQuery(document).ready(function($) {

$('.class, .id').click(function() { 

//  Your code

    }

});

Nous pouvons coder comme suit également, j'ai utilisé l'événement flou ici.

$("#proprice, #proqty").blur(function(){
      var price=$("#proprice").val();
      var qty=$("#proqty").val();
      if(price != '' || qty != '')
      {
          $("#totalprice").val(qty*price);
      }
  });

J'ai un lien vers un objet contenant de nombreux champs de saisie, qui doit être géré par le même événement. Donc j'utilise simplement find () pour obtenir tous les objets intérieurs, qui doivent avoir l'événement

var form = $('<form></form>');
// ... apending several input fields

form.find('input').on('change', onInputChange);

Dans le cas où vos objets sont un niveau plus bas le lien des enfants () au lieu trouver () méthode peut être utilisée.

En plus des excellents exemples et réponses ci-dessus, vous pouvez également faire une "recherche" pour deux éléments différents en utilisant leurs classes. Par exemple:

<div class="parent">
<div class="child1">Hello</div>
<div class="child2">World</div>
</div>

<script>
var x = jQuery('.parent').find('.child1, .child2').text();
console.log(x);
</script>

Cela devrait produire "HelloWorld".