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

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