কীভাবে jQuery ব্যবহার করে শ্রেণি পরিবর্তনে কোনও ইভেন্ট ফায়ার করবেন?

Question 1

আমি কিছু চাই:

$('#myDiv').bind('class "submission ok" added'){
    alert('class "submission ok" has been added');
});

Question 2

কোনও শ্রেণি পরিবর্তিত হওয়ার পরে কোনও ইভেন্ট উত্থাপিত হয় না। বিকল্পটি হ'ল ম্যানুয়ালি একটি ইভেন্ট উত্থাপন করা হবে যখন আপনি কর্মক্রমগতভাবে ক্লাস পরিবর্তন করেন:

$someElement.on('event', function() {
    $('#myDiv').addClass('submission-ok').trigger('classChange');
});

// in another js file, far, far away
$('#myDiv').on('classChange', function() {
     // do stuff
});

হালনাগাদ

এই প্রশ্নটি কিছু দর্শকদের একত্রিত হতে পারে বলে মনে হচ্ছে, সুতরাং এখানে একটি পদ্ধতির একটি আপডেট রয়েছে যা নতুন ব্যবহার করে বিদ্যমান কোডটি সংশোধন না করে ব্যবহার করা যেতে পারে MutationObserver:

var $div = $("#foo");
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName === "class") {
      var attributeValue = $(mutation.target).prop(mutation.attributeName);
      console.log("Class attribute changed to:", attributeValue);
    }
  });
});
observer.observe($div[0], {
  attributes: true
});

$div.addClass('red');

.red { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" class="bar">#foo.bar</div>

স্নিপেট প্রসারিত করুন

সচেতন থাকুন যে MutationObserverশুধুমাত্র নতুন ব্রাউজারগুলির জন্যই উপলভ্য, বিশেষত ক্রোম 26, এফএফ 14, আইই 11, অপেরা 15 এবং সাফারি 6. আরও তথ্যের জন্য এমডিএন দেখুন । যদি আপনি লিগ্যাসি ব্রাউজারগুলিকে সমর্থন করতে চান তবে আপনাকে আমার প্রথম উদাহরণে বর্ণিত পদ্ধতিটি ব্যবহার করতে হবে।

Question 3

আপনি মূল jQuery অ্যাডক্লাস এবং রিমল ক্লাস ফাংশনগুলিকে নিজের সাথে প্রতিস্থাপন করতে পারেন যা মূল ফাংশনগুলিকে কল করে এবং তারপরে একটি কাস্টম ইভেন্ট ট্রিগার করতে পারে। (আসল ফাংশন রেফারেন্স ধারণ করতে একটি স্ব-চালিত বেনামে ফাংশন ব্যবহার করা)

(function( func ) {
    $.fn.addClass = function() { // replace the existing function on $.fn
        func.apply( this, arguments ); // invoke the original function
        this.trigger('classChanged'); // trigger the custom event
        return this; // retain jQuery chainability
    }
})($.fn.addClass); // pass the original function as an argument

(function( func ) {
    $.fn.removeClass = function() {
        func.apply( this, arguments );
        this.trigger('classChanged');
        return this;
    }
})($.fn.removeClass);

তারপরে আপনার বাকী কোডটি আপনার প্রত্যাশার মতোই সহজ হবে।

$(selector).on('classChanged', function(){ /*...*/ });

হালনাগাদ:

এই পদ্ধতিটি অনুমান করে তোলে যে ক্লাসগুলি কেবল jQuery অ্যাডক্লাস এবং সরানো ক্লাস পদ্ধতিগুলির মাধ্যমে পরিবর্তিত হবে। ক্লাসগুলি যদি অন্য উপায়ে সংশোধন করা হয় (যেমন ডিওএম উপাদানটির মাধ্যমে শ্রেণীর বৈশিষ্ট্যগুলির সরাসরি ম্যানিপুলেশন) MutationObserverএখানে গ্রহণযোগ্য উত্তরে বর্ণিত হিসাবে এর মতো কিছু ব্যবহার করা প্রয়োজনীয় হবে।

এছাড়াও এই পদ্ধতিগুলিতে একাধিক উন্নতি হিসাবে:

কলব্যাক ফাংশনের আর্গুমেন্ট হিসাবে নির্দিষ্ট শ্রেণীর সাথে পাস হওয়া ( ) বা মুছে ফেলা ( ) প্রতিটি শ্রেণীর জন্য একটি ইভেন্ট ট্রিগার করুন এবং কেবল তখনই ট্রিগার করা হয়েছিল যদি নির্দিষ্ট শ্রেণিটি আসলে যুক্ত হয় (পূর্বে উপস্থিত ছিল না) বা সরানো হয়েছিল (আগে উপস্থিত ছিল)classAddedclassRemoved

classChangedকোনও ক্লাস আসলে পরিবর্তিত হলে কেবল ট্রিগার করুন

(function( func ) {
    $.fn.addClass = function(n) { // replace the existing function on $.fn
        this.each(function(i) { // for each element in the collection
            var $this = $(this); // 'this' is DOM element in this context
            var prevClasses = this.getAttribute('class'); // note its original classes
            var classNames = $.isFunction(n) ? n(i, prevClasses) : n.toString(); // retain function-type argument support
            $.each(classNames.split(/\s+/), function(index, className) { // allow for multiple classes being added
                if( !$this.hasClass(className) ) { // only when the class is not already present
                    func.call( $this, className ); // invoke the original function to add the class
                    $this.trigger('classAdded', className); // trigger a classAdded event
                }
            });
            prevClasses != this.getAttribute('class') && $this.trigger('classChanged'); // trigger the classChanged event
        });
        return this; // retain jQuery chainability
    }
})($.fn.addClass); // pass the original function as an argument

(function( func ) {
    $.fn.removeClass = function(n) {
        this.each(function(i) {
            var $this = $(this);
            var prevClasses = this.getAttribute('class');
            var classNames = $.isFunction(n) ? n(i, prevClasses) : n.toString();
            $.each(classNames.split(/\s+/), function(index, className) {
                if( $this.hasClass(className) ) {
                    func.call( $this, className );
                    $this.trigger('classRemoved', className);
                }
            });
            prevClasses != this.getAttribute('class') && $this.trigger('classChanged');
        });
        return this;
    }
})($.fn.removeClass);

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

$(document).on('classAdded', '#myElement', function(event, className) {
    if(className == "something") { /* do something */ }
});

Question 4

triggerআপনার নিজের ইভেন্টটি ফায়ার করতে ব্যবহার করুন । যখনই আপনি নামের সাথে ক্লাস অ্যাড ট্রিগার পরিবর্তন করেন

জেএস ফিডল ডেমো

$("#main").on('click', function () {
    $("#chld").addClass("bgcolorRed").trigger("cssFontSet");
});

$('#chld').on('cssFontSet', function () {

    alert("Red bg set ");
});

JQuery শিখুন: সহজ এবং সহজ jQuery টিউটোরিয়াল ব্লগ

Question 5

আপনি এই জাতীয় কিছু ব্যবহার করতে পারেন:

$(this).addClass('someClass');

$(Selector).trigger('ClassChanged')

$(otherSelector).bind('ClassChanged', data, function(){//stuff });

তবে অন্যথায়, না, কোনও শ্রেণি পরিবর্তিত হলে কোনও ঘটনাকে চালিত করার কোনও পূর্বনির্ধারিত কার্য নেই।

ট্রিগার সম্পর্কে এখানে আরও পড়ুন