jQuery針對多個元素的相同點擊事件

 

有沒有辦法為頁面上的不同元素執行相同的代碼？

1.  
   $( '.class1').click(function() {
2.  
   some_function();
3.  
   });
4.  
    
5.  
   $( '.class2').click(function() {
6.  
   some_function();
7.  
   });

而是做一些像：

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

謝謝

---

#1樓

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

要么：

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

這也適用於現有對象：

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

---

#2樓

只需將$('.myclass1, .myclass2, .myclass3')用於多個選擇器。 此外，您不需要lambda函數將現有函數綁定到click事件。

---

#3樓

我通常使用on ，而不是click 。 它允許我向特定函數添加更多事件偵聽器。

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

希望能幫助到你！

---

#4樓

另一種選擇，假設您的元素存儲為變量（如果您在函數體中多次訪問它們，通常是個好主意）：

1.  
   function disableMinHeight() {
2.  
   var $html = $("html");
3.  
   var $body = $("body");
4.  
   var $slideout = $("#slideout");
5.  
    
6.  
   $html.add($body).add($slideout).css( "min-height", 0);
7.  
   };

利用jQuery鏈接並允許您使用引用。

---

#5樓

我有一個包含許多輸入字段的對象的鏈接，這需要由同一事件處理。 所以我只需使用find（）來獲取需要擁有事件的所有內部對象

1.  
   var form = $('<form></form>');
2.  
   // ... apending several input fields
3.  
    
4.  
   form.find( 'input').on('change', onInputChange);

如果你的對象是鏈接的一級，可以使用children（）而不是find（）方法。

---

#6樓

我們也可以編寫如下代碼，我在這里使用了模糊事件。

1.  
   $( "#proprice, #proqty").blur(function(){
2.  
   var price=$("#proprice").val();
3.  
   var qty=$("#proqty").val();
4.  
   if(price != '' || qty != '')
5.  
   {
6.  
   $( "#totalprice").val(qty*price);
7.  
   }
8.  
   });

---

#7樓

除了上面的優秀示例和答案，您還可以使用他們的類對兩個不同的元素進行“查找”。 例如：

1.  
   <div class="parent">
2.  
   <div class="child1">Hello</div>
3.  
   <div class="child2">World</div>
4.  
   </div>
5.  
    
6.  
   <script>
7.  
   var x = jQuery('.parent').find('.child1, .child2').text();
8.  
   console.log(x);
9.  
   </script>

這應輸出“HelloWorld”。

---

#8樓

添加逗號分隔的類列表，如下所示：

1.  
   jQuery( document).ready(function($) {
2.  
    
3.  
   $( '.class, .id').click(function() {
4.  
    
5.  
   // Your code
6.  
    
7.  
   }
8.  
    
9.  
   });

---

#9樓

如果您有或想要將元素保存為變量（jQuery對象），您還可以循環它們：

1.  
   var $class1 = $('.class1');
2.  
   var $class2 = $('.class2');
3.  
    
4.  
   $([$class1,$class2]).each( function() {
5.  
   $( this).on('click', function(e) {
6.  
   some_function();
7.  
   });
8.  
   });

---

#10樓

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

確保你放置一個像$（'。class1，space here.class2'）的空格，否則它將無效