jQuery dasselbe Klickereignis für mehrere Elemente

435

Gibt es eine Möglichkeit, denselben Code für verschiedene Elemente auf der Seite auszuführen?

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

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

stattdessen etwas zu tun wie:

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

Vielen Dank

jquery events Kelvin
quelle

Antworten:

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

Oder:

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

Dies funktioniert auch mit vorhandenen Objekten:

const $class1 = $('.class1');
const $class2 = $('.class2');
$class1.add($class2).on('click', some_function);
Eevee
quelle
11
Damit sich Entwickler daran erinnern können, ist es das gleiche Format wie das Anwenden eines CSS-Selektors beim Definieren von Stilen
Brett Weber,
8
Was wäre, wenn class2 wie folgt zwischengespeichert worden wäre var class2 = $ (". Class2")?
Vivek S
18
@NeverBackDown .add()funktioniert auch mit jquery-Objekten
Eevee
2
Beachten Sie, dass dadurch weiterhin Ereignisse an vorhandene Abfrageobjekte angehängt werden, auch wenn einer der Selektoren undefiniert zurückgibt.
Ben Sewards
3
Kann jemand erklären, was der wahre Unterschied zwischen $('.class1, .class2')und ist $('.class1').add('.class2')? In welchem ​​Fall sollten wir verwenden .add()?
Taufik Nur Rahmanda
108

Ich benutze normalerweise onanstelle von click. Dadurch kann ich einer bestimmten Funktion weitere Ereignis-Listener hinzufügen.

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

Ich hoffe es hilft!

bzin
quelle
1
Ich mag diesen Weg besser. Aber können Sie ein Element nach Klasse und eines nach ID in derselben Deklaration als Ziel festlegen? Zum Beispiel $ (document) .on ("click touchend", ".class1, # id1, .class3", function () {// do stuff});
Gaurav Ojha
3
ein Jahr später: Ja, das kannst du! @ GauravOjha
Obed Marquez Parlapiano
3
Diese Technik - das Erstellen eines delegierten Handlers anstelle eines direkten Handlers - bietet auch den einzigartigen Vorteil, Ereignisse zu behandeln, die durch übereinstimmende Elemente ausgelöst werden, die nach der Registrierung des Handlers erstellt wurden. Siehe: api.jquery.com/on
Jonathan Lidbeck
39 
$('.class1, .class2').click(some_function);

Stellen Sie sicher, dass Sie ein Leerzeichen wie $ ('. Class1, space here.class2') einfügen, da dies sonst nicht funktioniert.

cooler Typ
quelle
17

Einfach $('.myclass1, .myclass2, .myclass3')für mehrere Selektoren verwenden. Außerdem benötigen Sie keine Lambda-Funktionen, um eine vorhandene Funktion an das Klickereignis zu binden.

code_burgar
quelle
7
Sie brauchen ein Leerzeichen nach den Kommas
Maurizio In Dänemark
10

Eine weitere Alternative, vorausgesetzt, Ihre Elemente werden als Variablen gespeichert (was häufig eine gute Idee ist, wenn Sie in einem Funktionskörper mehrmals darauf zugreifen):

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

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

Nutzt die jQuery-Verkettung und ermöglicht die Verwendung von Referenzen.

Zuhälter
quelle
4

Wenn Sie Ihre Elemente als Variablen (jQuery-Objekte) haben oder behalten möchten, können Sie sie auch durchlaufen:

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

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

Fügen Sie eine durch Kommas getrennte Liste von Klassen wie folgt hinzu:

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

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

//  Your code

    }

});
Dev
quelle
2

Wir können auch wie folgt codieren, ich habe hier ein Unschärfeereignis verwendet.

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

Ich habe einen Link zu einem Objekt, das viele Eingabefelder enthält, die von demselben Ereignis behandelt werden müssen. Also benutze ich einfach find () , um alle inneren Objekte zu erhalten, die das Ereignis haben müssen

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

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

Falls Ihre Objekte sind eine Ebene nach unten den Link Kinder () statt finden () Methode verwendet werden kann.

Andrii Bogachenko
quelle
1

Zusätzlich zu den oben aufgeführten hervorragenden Beispielen und Antworten können Sie mithilfe ihrer Klassen auch zwei verschiedene Elemente "finden". Zum Beispiel:

<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>

Dies sollte "HelloWorld" ausgeben.

Arkhaine
quelle