একাধিক উপাদানগুলির জন্য 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

এটির স্মরণে রাখতে বিকাশকারীদের সহায়তা করতে, আরও বেশি সাইয়েডো ক্লাস ব্যবহার করে কিছুটা প্রসারিত করা হলেও শৈলীর সংজ্ঞা দেওয়ার সময় সিএসএস নির্বাচক প্রয়োগ করার মতো একই ফর্ম্যাট

— ব্রেট ওয়েবার

ক্লাস 2 যদি এই ভ্যারিসের মতো ক্যাশেড থাকে 2 = $ ("। শ্রেণি 2")?

— বিবেক এস

@NeverBackDown .add()jQuery সঙ্গে কাজ খুব বস্তু

— Eevee

মনে রাখবেন যে এটি এখনও উপস্থিত জ্যাকোরি অবজেক্টগুলির সাথে ইভেন্টগুলি সংযুক্ত করবে, এমনকি নির্বাচকদের মধ্যে কেউ অপরিবর্তিত থাকলেও না।

— বেন সেওয়ার্ডস

কারো মধ্যে আসল পার্থক্যটা কি ব্যাখ্যা করতে পারেন $('.class1, .class2')এবং $('.class1').add('.class2')? কোন ক্ষেত্রে আমাদের ব্যবহার করা উচিত .add()?

— তৌফিক নূর রহমন্দা

Answer 2

আমি সাধারণত onপরিবর্তে ব্যবহার click। এটি আমাকে একটি নির্দিষ্ট অনুষ্ঠানে আরও ইভেন্ট শ্রোতাদের যুক্ত করার অনুমতি দেয়।

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

আশা করি এটা সাহায্য করবে!

Comments

আমি এইভাবে ভাল পছন্দ। কিন্তু আপনি কি একই ঘোষণায় শ্রেণি দ্বারা একটি উপাদান এবং আইডি দ্বারা একটিকে লক্ষ্য করতে পারেন? যেমন $ (ডকুমেন্ট) .অন ("স্পর্শ ক্লিক করুন", ".ক্লাস 1, # আইডি 1, .ক্লাস 3", ফাংশন () {// ডু স্টাফ করুন});

— গৌরব ওঝা

এক বছর পরে: হ্যাঁ, আপনি পারেন! @ গৌরবওঝা

— ওবেদ মার্কেজ পার্লাপিয়ানো

এই কৌশলটি - সরাসরি হ্যান্ডলারের পরিবর্তে একটি প্রতিনিধি তৈরি করা - হ্যান্ডলারের নিবন্ধকরণের পরে তৈরি উপাদানগুলির সাথে মিলিয়ে ট্রিগার করা ইভেন্টগুলি পরিচালনা করার অনন্য সুবিধাও সরবরাহ করে । দেখুন: api.jquery.com/on

— জোনাথন লিডবেক

Answer 3

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

নিশ্চিত করুন যে আপনি একটি স্থান $ ('। শ্রেণি 1, স্পেস 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 চেইনিংয়ের সুবিধা নেয় এবং আপনাকে রেফারেন্সগুলি ব্যবহার করতে দেয়।

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>

এটি "হ্যালো ওয়ার্ল্ড" আউটপুট করা উচিত।