jQuery acara klik yang sama untuk beberapa elemen

436

Apakah ada cara untuk mengeksekusi kode yang sama untuk berbagai elemen pada halaman?

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

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

alih-alih melakukan sesuatu seperti:

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

Terima kasih

jquery events Kelvin
sumber

Jawaban:

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

Atau:

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

Ini juga berfungsi dengan objek yang ada:

const $class1 = $('.class1');
const $class2 = $('.class2');
$class1.add($class2).on('click', some_function);
Eevee
sumber
11
Untuk membantu pengembang mengingat ini, meskipun sedikit lebih diperluas dengan menggunakan lebih banyak kelas psuedo, formatnya sama dengan menerapkan pemilih css ketika mendefinisikan gaya
Brett Weber
8
Bagaimana jika class2 di-cache seperti ini var class2 = $ (". Class2")?
Vivek S
18
@NeverBackDown .add()bekerja dengan objek jquery juga
Eevee
2
Perhatikan bahwa ini masih akan melampirkan peristiwa ke objek jquery yang ada, bahkan jika salah satu penyeleksi mengembalikan undefined.
Ben Sewards
3
dapatkah seseorang menjelaskan apa perbedaan nyata antara $('.class1, .class2')dan $('.class1').add('.class2')? dalam hal apa kita harus menggunakan .add()?
Taufik Nur Rahmanda
108

Saya biasanya menggunakan onbukan click. Ini memungkinkan saya untuk menambahkan lebih banyak acara pendengar ke fungsi tertentu.

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

Semoga ini bisa membantu!

bzin
sumber
1
Saya suka cara ini lebih baik. Tetapi bisakah Anda menargetkan satu elemen berdasarkan kelas dan satu dengan ID dalam deklarasi yang sama? Untuk misalnya $ (dokumen) .on ("klik touchend", ".class1, # id1, .class3", function () {// do stuff});
Gaurav Ojha
3
setahun kemudian: ya, Anda bisa! @GauravOjha
Obed Marquez Parlapiano
3
Teknik ini - membuat handler yang didelegasikan, bukan langsung - juga menawarkan keuntungan unik dari penanganan peristiwa yang dipicu oleh elemen yang cocok yang dibuat setelah mendaftarkan handler. Lihat: api.jquery.com/on
Jonathan Lidbeck
39 
$('.class1, .class2').click(some_function);

Pastikan Anda meletakkan spasi seperti $ ('. Class1, space here.class2') atau tidak akan berfungsi.

pria keren
sumber
17

Cukup gunakan $('.myclass1, .myclass2, .myclass3')untuk beberapa penyeleksi. Juga, Anda tidak perlu fungsi lambda untuk mengikat fungsi yang ada ke acara klik.

code_burgar
sumber
7
Anda membutuhkan tempat setelah koma
Maurizio In denmark
10

Alternatif lain, dengan asumsi elemen Anda disimpan sebagai variabel (yang seringkali merupakan ide yang baik jika Anda mengaksesnya beberapa kali di badan fungsi):

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

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

Mengambil keuntungan dari chaining jQuery dan memungkinkan Anda untuk menggunakan referensi.

pimbrouwers
sumber
4

Jika Anda memiliki atau ingin mempertahankan elemen Anda sebagai variabel (objek jQuery), Anda juga dapat mengulanginya:

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

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

Tambahkan daftar kelas yang dipisahkan koma seperti ini:

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

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

//  Your code

    }

});
Dev
sumber
2

Kami dapat kode seperti mengikuti juga, saya telah menggunakan acara blur di sini.

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

Saya memiliki tautan ke objek yang berisi banyak bidang input, yang harus ditangani oleh peristiwa yang sama. Jadi saya cukup menggunakan find () untuk mendapatkan semua objek di dalamnya, yang perlu memiliki acara

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

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

Jika objek Anda berada satu tingkat di bawah tautan anak-anak () alih-alih metode find () dapat digunakan.

Andrii Bogachenko
sumber
1

Selain contoh dan jawaban yang sangat baik di atas, Anda juga dapat melakukan "menemukan" untuk dua elemen berbeda menggunakan kelas mereka. Sebagai contoh:

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

Ini akan menghasilkan "HelloWorld".

Arkhaine
sumber