jQuery के कई तत्वों के लिए एक ही क्लिक घटना

Question

क्या पृष्ठ पर विभिन्न तत्वों के लिए एक ही कोड निष्पादित करने का कोई तरीका है?

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

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

इसके बजाय कुछ करने की तरह:

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

धन्यवाद

Answer 1

$('.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);

Comments

डेवलपर्स को यह याद रखने में मदद करने के लिए, भले ही अधिक psuedo कक्षाओं का उपयोग करके थोड़ा और बढ़ाया जाए, यह एक ही प्रारूप है, जो शैलियों को परिभाषित करते समय css चयनकर्ता को लागू करने के रूप में होता है

— Brett Weber

क्या होगा अगर वर्ग 2 को इस तरह के वर्ग 2 = $ ("वर्ग 2") के रूप में कैश किया गया है?

— विवेक एस

@NeverBackDown .add()jquery वस्तुओं के साथ भी काम करता है

— Eevee

ध्यान दें कि यह अभी भी इवेंट्स को jquery ऑब्जेक्ट्स के साथ जोड़ेगी जो मौजूद हैं, भले ही चयनकर्ताओं में से कोई भी अपरिभाषित हो।

— बेन सीवार्ड्स

क्या कोई समझा सकता है कि वास्तविक अंतर क्या है $('.class1, .class2')और $('.class1').add('.class2')? हमें किस मामले में उपयोग करना चाहिए .add()?

— तौफीक नूर रहमानंद

Answer 2

मैं आम तौर पर के onबजाय का उपयोग करें click। यह मुझे एक विशेष फ़ंक्शन में अधिक ईवेंट श्रोताओं को जोड़ने की अनुमति देता है।

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

आशा है ये मदद करेगा!

Comments

मुझे यह तरीका बेहतर लगता है। लेकिन क्या आप एक ही घोषणा में कक्षा के आधार पर एक और आईडी द्वारा एक तत्व को लक्षित कर सकते हैं? उदाहरण के लिए $ (दस्तावेज) .on ("क्लिक टचेंड", ".class1, # id1, .class3", फ़ंक्शन () {// do stuff});

— गौरव ओझा

एक साल बाद: हाँ, आप कर सकते हैं! @ गौरव ओझा

— मार्केज़ परलापियानो

यह तकनीक - प्रत्यक्ष हैंडलर के बजाय एक प्रत्यायोजित, बनाना - हैंडलर को पंजीकृत करने के बाद बनाए गए तत्वों से मेल खाते हुए घटनाओं को संभालने का अनूठा लाभ प्रदान करता है । देखें: api.jquery.com/on

— जोनाथन लिडबेक

Answer 3

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

सुनिश्चित करें कि आपने $ ('। Class1, space here.class2') जैसी जगह डाल दी है, अन्यथा यह काम नहीं करेगा।

Answer 4

बस $('.myclass1, .myclass2, .myclass3')कई चयनकर्ताओं के लिए उपयोग करें । इसके अलावा, आपको किसी मौजूदा फ़ंक्शन को क्लिक ईवेंट में बाँधने के लिए लैम्ब्डा फ़ंक्शन की आवश्यकता नहीं है।

Comments

आपको कॉमा के बाद एक स्थान की आवश्यकता है

— मॉरीज़ियो इन डेनमार्क

Answer 5

एक अन्य विकल्प, अपने तत्वों को चर के रूप में संग्रहीत किया जाता है (जो कि एक अच्छा विचार है यदि आप एक फ़ंक्शन बॉडी में उन्हें कई बार एक्सेस कर रहे हैं):

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

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

JQuery chaining का लाभ लेता है और आप संदर्भ का उपयोग करने की अनुमति देता है।

Answer 6

यदि आप अपने तत्वों को चर (jQuery ऑब्जेक्ट) के रूप में रखना चाहते हैं, तो आप उन पर भी लूप कर सकते हैं:

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

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

Answer 7

एक अल्पविराम से अलग वर्गों की सूची इस तरह जोड़ें:

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

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

//  Your code

    }

});

Answer 8

हम निम्नलिखित की तरह कोड भी कर सकते हैं, मैंने यहां ब्लर इवेंट का उपयोग किया है।

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

Answer 9

मेरे पास एक ऑब्जेक्ट के लिए एक लिंक है जिसमें कई इनपुट फ़ील्ड शामिल हैं, जिन्हें उसी घटना से निपटने की आवश्यकता है। इसलिए मैं बस सभी अंदर की वस्तुओं को पाने के लिए खोज () का उपयोग करता हूं , जिसके लिए घटना की आवश्यकता है

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

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

यदि आपके ऑब्जेक्ट लिंक बच्चों () के बजाय एक स्तर नीचे हैं तो पाते हैं () विधि का उपयोग किया जा सकता है।

Answer 10

ऊपर दिए गए उत्कृष्ट उदाहरणों और उत्तरों के अलावा, आप उनकी कक्षाओं का उपयोग करते हुए दो अलग-अलग तत्वों के लिए "खोज" भी कर सकते हैं। उदाहरण के लिए:

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

यह "हैलोवर्ल्ड" का उत्पादन करना चाहिए।