jQuery to samo zdarzenie kliknięcia dla wielu elementów

Czy jest jakiś sposób na wykonanie tego samego kodu dla różnych elementów na stronie?

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

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

zamiast tego zrobić coś takiego:

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

Dzięki

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

Lub:

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

Działa to również z istniejącymi obiektami:

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

Zwykle używam onzamiast click. Pozwala mi dodawać więcej detektorów zdarzeń do określonej funkcji.

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

Mam nadzieję, że to pomoże!

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

Upewnij się, że wstawiłeś spację jak $ ('. Class1, space here.class2'), bo inaczej to nie zadziała.

Po prostu użyj $('.myclass1, .myclass2, .myclass3')dla wielu selektorów. Ponadto nie potrzebujesz funkcji lambda, aby powiązać istniejącą funkcję ze zdarzeniem click.

Inna alternatywa, zakładając, że twoje elementy są przechowywane jako zmienne (co często jest dobrym pomysłem, jeśli korzystasz z nich wielokrotnie w ciele funkcji):

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

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

Korzysta z łączenia łańcuchów jQuery i pozwala korzystać z referencji.

Jeśli masz lub chcesz zachować swoje elementy jako zmienne (obiekty jQuery), możesz również nad nimi zapętlić:

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

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

Dodaj listę klas oddzielonych przecinkami:

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

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

//  Your code

    }

});

Możemy kodować w następujący sposób, użyłem tutaj zdarzenia rozmycia.

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

Mam link do obiektu zawierającego wiele pól wejściowych, które wymagają obsługi przez to samo zdarzenie. Więc po prostu używam find (), aby uzyskać wszystkie wewnętrzne obiekty, które muszą mieć zdarzenie

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

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

W przypadku, gdy twoje obiekty znajdują się o jeden poziom niżej, zamiast metody find () można użyć metody link child () .

Oprócz doskonałych przykładów i odpowiedzi powyżej możesz także wykonać „znajdź” dla dwóch różnych elementów za pomocą ich klas. Na przykład:

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

To powinno wypisać „HelloWorld”.