jQuery เหตุการณ์คลิกเดียวกันสำหรับหลายองค์ประกอบ

มีวิธีการรันรหัสเดียวกันสำหรับองค์ประกอบต่าง ๆ ในหน้า?

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

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

แทนที่จะทำสิ่งที่ชอบ:

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

ขอบคุณ

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

หรือ:

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

สิ่งนี้ยังทำงานกับวัตถุที่มีอยู่:

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

ผมปกติใช้แทนon clickมันทำให้ฉันสามารถเพิ่มผู้ฟังเหตุการณ์ให้ฟังก์ชั่นที่เฉพาะเจาะจงมากขึ้น

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

หวังว่ามันจะช่วย!

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

ตรวจสอบให้แน่ใจว่าคุณใส่ช่องว่างเช่น $ ('. class1, space ที่นี่ .class2') มิฉะนั้นจะใช้งานไม่ได้

เพียงใช้$('.myclass1, .myclass2, .myclass3')สำหรับตัวเลือกหลายตัว นอกจากนี้คุณไม่จำเป็นต้องใช้ฟังก์ชั่นแลมบ์ดาเพื่อผูกฟังก์ชั่นที่มีอยู่กับเหตุการณ์คลิก

อีกทางเลือกหนึ่งสมมติว่าองค์ประกอบของคุณถูกจัดเก็บเป็นตัวแปร (ซึ่งมักเป็นความคิดที่ดีถ้าคุณเข้าถึงองค์ประกอบหลายครั้งในร่างกาย):

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

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

ใช้ประโยชน์จากการผูกมัด jQuery และอนุญาตให้คุณใช้การอ้างอิง

หากคุณมีหรือต้องการที่จะให้องค์ประกอบของคุณเป็นตัวแปร (วัตถุ jQuery) คุณยังสามารถวนรอบพวกเขา:

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

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

เพิ่มรายการของคลาสที่คั่นด้วยเครื่องหมายจุลภาคดังนี้:

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

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

//  Your code

    }

});

เราสามารถโค๊ดแบบนี้ได้ฉันได้ใช้เหตุการณ์เบลอที่นี่

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

ฉันมีลิงก์ไปยังวัตถุที่บรรจุเขตข้อมูลอินพุตจำนวนมากซึ่งต้องจัดการกับเหตุการณ์เดียวกัน ดังนั้นฉันเพียงใช้find ()เพื่อรับวัตถุทั้งหมดที่ต้องมีเหตุการณ์

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

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

ในกรณีที่วัตถุของคุณลดลงหนึ่งระดับคุณสามารถใช้วิธีเชื่อมโยงchildren ()แทนfind ()

นอกจากตัวอย่างที่ดีเยี่ยมและคำตอบข้างต้นคุณยังสามารถทำการ "ค้นหา" สำหรับองค์ประกอบที่แตกต่างกันสองรายการโดยใช้คลาส ตัวอย่างเช่น:

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

สิ่งนี้ควรส่งออก "HelloWorld"