it-swarm.com.de

jDas gleiche Klickereignis für mehrere Elemente abfragen

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

402
Kelvin
$('.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);
806
Eevee

Normalerweise verwende ich on anstelle von click. Damit kann ich einer bestimmten Funktion weitere Ereignis-Listener hinzufügen.

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

Ich hoffe es hilft!

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

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

36
coolguy

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

15
code_burgar

Eine weitere Alternative unter der Annahme, dass Ihre Elemente als Variablen gespeichert sind (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 Verkettung von jQuery und ermöglicht die Verwendung von Referenzen.

9
pim

Wenn Sie Ihre Elemente als Variablen (jQuery-Objekte) haben oder behalten möchten, können Sie auch eine Schleife über sie erstellen:

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

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

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

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

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

//  Your code

    }

});
2
Dev

Wir können wie folgt auch codieren, ich habe Unschärfe-Ereignis hier verwendet.

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

Ich habe einen Link zu einem Objekt, das viele Eingabefelder enthält, die vom selben 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);

Für den Fall, dass Ihre Objekte eine Ebene tiefer liegen, klicken Sie auf den Link children () anstatt find ( ) kann verwendet werden.

0

Zusätzlich zu den hervorragenden Beispielen und Antworten oben 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.

0
Arkhaine