[javascript] jQuery를 사용하여 클래스 변경시 이벤트를 발생시키는 방법은 무엇입니까?

원래 jQuery addClass 및 removeClass 함수를 원래 함수를 호출 한 다음 사용자 지정 이벤트를 트리거하는 고유 한 함수로 바꿀 수 있습니다. (자체 호출 익명 함수를 사용하여 원래 함수 참조 포함)

(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 addClass 및 removeClass 메서드를 통해서만 변경된다는 가정을합니다. 클래스가 다른 방식으로 수정되는 경우 (예 : DOM 요소를 통한 클래스 속성의 직접 조작) MutationObserver여기에 허용 된 답변에 설명 된대로 s와 같은 것을 사용해야 합니다.

또한 이러한 방법에 대한 몇 가지 개선 사항 :

• 콜백 함수에 인수로 전달 된 특정 클래스와 함께 추가 ( ) 또는 제거 ( ) 되는 각 클래스에 대한 이벤트를 트리거하고 특정 클래스가 실제로 추가 (이전에 없음) 또는 제거 (이전에 존재) 된 경우에만 트리거됩니다.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);
  

이러한 대체 함수를 사용하면 classChanged를 통해 변경된 모든 클래스 또는 콜백 함수에 대한 인수를 확인하여 추가 또는 제거되는 특정 클래스를 처리 할 수 ​​있습니다.

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