jQuery cùng một sự kiện nhấp chuột cho nhiều yếu tố

Có cách nào để thực thi cùng một mã cho các thành phần khác nhau trên trang không?

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

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

thay vào đó để làm một cái gì đó như:

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

Cảm ơn

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

Hoặc là:

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

Điều này cũng hoạt động với các đối tượng hiện có:

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

Tôi thường sử dụng onthay vì click. Nó cho phép tôi thêm nhiều sự kiện người nghe vào một chức năng cụ thể.

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

Hy vọng nó giúp!

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

Hãy chắc chắn rằng bạn đặt một khoảng trắng như $ ('. Class1, khoảng trắng ở đây. Class2') nếu không nó sẽ không hoạt động.

Đơn giản chỉ cần sử dụng $('.myclass1, .myclass2, .myclass3')cho nhiều bộ chọn. Ngoài ra, bạn không cần các hàm lambda để liên kết một hàm hiện có với sự kiện nhấp chuột.

Một cách khác, giả sử các phần tử của bạn được lưu trữ dưới dạng các biến (thường là một ý tưởng tốt nếu bạn truy cập chúng nhiều lần trong một thân hàm):

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

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

Tận dụng lợi thế của chuỗi jQuery và cho phép bạn sử dụng các tài liệu tham khảo.

Nếu bạn có hoặc muốn giữ các phần tử của mình dưới dạng các biến (đối tượng jQuery), bạn cũng có thể lặp qua chúng:

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

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

Thêm một danh sách các lớp được phân tách bằng dấu phẩy như thế này:

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

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

//  Your code

    }

});

Chúng tôi có thể mã như sau, tôi đã sử dụng sự kiện mờ ở đây.

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

Tôi có một liên kết đến một đối tượng chứa nhiều trường đầu vào, đòi hỏi phải được xử lý bởi cùng một sự kiện. Vì vậy, tôi chỉ cần sử dụng find () để lấy tất cả các đối tượng bên trong, cần phải có sự kiện

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

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

Trong trường hợp các đối tượng của bạn giảm một cấp, có thể sử dụng phương thức children () thay vì find () .

Ngoài các ví dụ và câu trả lời xuất sắc ở trên, bạn cũng có thể thực hiện "tìm" cho hai yếu tố khác nhau bằng cách sử dụng các lớp của chúng. Ví dụ:

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

Điều này sẽ xuất ra "HelloWorld".