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

435

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

jquery events

— kelwin
źródło

866

$('.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);

— Eevee
źródło

11

Aby pomóc programistom zapamiętać to, nawet jeśli jest nieco bardziej rozbudowany przy użyciu większej liczby klas psuedo, jest to ten sam format, co zastosowanie selektora css podczas definiowania stylów

— Brett Weber

8

Co by było, gdyby klasa 2 była buforowana w ten sposób var class2 = $ (". Class2")?

— Vivek S

18

@NeverBackDown .add()działa również z obiektami jquery

— Eevee

2

Zauważ, że nadal będzie to dołączało zdarzenia do istniejących obiektów jquery, nawet jeśli jeden z selektorów zwróci niezdefiniowany.

— Ben Sewards,

3

czy ktoś może wyjaśnić, jaka jest prawdziwa różnica między $('.class1, .class2')i $('.class1').add('.class2')? w jakim przypadku powinniśmy użyć .add()?

— Taufik Nur Rahmanda

108

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!

— bzin
źródło

1

Lubię to w ten sposób. Ale czy możesz kierować jeden element według klasy i jeden według identyfikatora w tej samej deklaracji? Na przykład $ (document) .on („click touchend”, „.class1, # id1, .class3”, function () {// do stuff});

— Gaurav Ojha

3

rok później: tak, możesz! @GauravOjha

— Obed Marquez Parlapiano

3

Ta technika - tworzenie delegowanej, a nie bezpośredniej procedury obsługi - oferuje także wyjątkową zaletę obsługi zdarzeń wyzwalanych przez dopasowanie elementów utworzonych po zarejestrowaniu procedury obsługi. Zobacz: api.jquery.com/on

— Jonathan Lidbeck

39

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

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

— Spoko gość
źródło

17

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.

— code_burgar
źródło

7

potrzebujesz spacji po przecinkach

— Maurizio W Danii

10

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.

— pimbrouwers
źródło

4

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();
    });
});

— frzsombor
źródło

3

Dodaj listę klas oddzielonych przecinkami:

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

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

//  Your code

    }

});

— Dev
źródło

2

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);
      }
  });

— Nitin Pawar
źródło

1

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 () .

— Andrii Bogachenko
źródło

1

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

— Arkhaine
źródło