web-dev-qa-db-fra.com

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

Est-il possible d'exécuter le même code pour différents éléments sur 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

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

Ou:

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

Cela fonctionne aussi avec les objets existants:

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

J'utilise normalement on au 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 ça aide!

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

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

36
coolguy

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

15
code_burgar

Une autre alternative, en supposant que vos éléments soient 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);
};

Exploite le chaînage jQuery et vous permet d’utiliser des références.

9
pim

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

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

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

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

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

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

//  Your code

    }

});
2
Dev

Nous pouvons coder comme suit aussi, j’ai utilisé blur event ici.

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

J'ai un lien vers un objet contenant de nombreux champs d'entrée, ce qui nécessite d'être traité par le même événement. Donc, j'utilise simplement find () pour obtenir tous les objets intérieurs qui ont besoin de l'événement

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

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

Dans le cas où vos objets sont situés à un niveau inférieur au lien [enfants () au lieu find () méthode peut être utilisée.

0
Andrii Bogachenko

En plus des excellents exemples et réponses ci-dessus, vous pouvez également rechercher deux éléments différents à l'aide de 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".

0
Arkhaine