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

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

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!


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.


17

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


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.


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

3

Tambahkan daftar kelas yang dipisahkan koma seperti ini:

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

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

//  Your code

    }

});

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

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.


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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.