jQuery의 CSS 클래스 변경 사항을 기반으로 이벤트를 어떻게 트리거할 수 있습니까?

jQuery에서 CSS 클래스 수정에 대한 이벤트 트리거

jQuery에서는 요소 내에서 CSS 클래스가 추가되거나 수정될 때 이벤트를 실행해야 할 수도 있습니다. . 그러나 CSS 클래스 변경 시 트리거되는 고유 이벤트는 없습니다.

사용자 정의 이벤트 솔루션

이 문제를 해결하려면 Trigger() 함수를 사용하여 사용자 정의 이벤트를 호출할 수 있습니다. addClass()를 사용하여 클래스를 수정하면 맞춤 이벤트가 발생하고, 이 이벤트는 특정 요소에 바인딩될 수 있습니다.

$(this).addClass('someClass');
$(mySelector).trigger('cssClassChanged');

코드의 다른 부분에서는 맞춤 이벤트를 선택기에 바인딩할 수 있습니다. 클래스 변경이 발생할 때 실행할 작업을 정의합니다.

$(otherSelector).bind('cssClassChanged', data, function(){ do stuff });

구현 예

다음 코드를 고려하세요. snippet:

$(function() {
  var button = $('.clickme')
      , box = $('.box')
  ;
  
  button.on('click', function() { 
    box.removeClass('box');
    $(document).trigger('buttonClick');
  });
            
  $(document).on('buttonClick', function() {
    box.text('Clicked!');
  });
});

.box { background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">Hi</div>
<button class="clickme">Click me</button>

이 예에서는 버튼을 클릭하면 "box" 클래스가 제거됩니다. 이는 "box" 클래스가 있는 div의 텍스트를 "Clicked!"로 변경하는 사용자 정의 이벤트 "buttonClick"을 트리거합니다.

위 내용은 jQuery의 CSS 클래스 변경 사항을 기반으로 이벤트를 어떻게 트리거할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!