
jQuery에서 CSS 클래스 수정에 대한 이벤트 트리거
jQuery에서는 요소 내에서 CSS 클래스가 추가되거나 수정될 때 이벤트를 실행해야 할 수도 있습니다. . 그러나 CSS 클래스 변경 시 트리거되는 고유 이벤트는 없습니다.
사용자 정의 이벤트 솔루션
이 문제를 해결하려면 Trigger() 함수를 사용하여 사용자 정의 이벤트를 호출할 수 있습니다. addClass()를 사용하여 클래스를 수정하면 맞춤 이벤트가 발생하고, 이 이벤트는 특정 요소에 바인딩될 수 있습니다.
1 2 | $(this).addClass( 'someClass' );
$(mySelector).trigger( 'cssClassChanged' );
|
로그인 후 복사
코드의 다른 부분에서는 맞춤 이벤트를 선택기에 바인딩할 수 있습니다. 클래스 변경이 발생할 때 실행할 작업을 정의합니다.
1 | $(otherSelector).bind( 'cssClassChanged' , data, function (){ do stuff });
|
로그인 후 복사
구현 예
다음 코드를 고려하세요. snippet:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $( function () {
var button = $( '.clickme' )
, box = $( '.box' )
;
button.on( 'click' , function () {
box.removeClass( 'box' );
$(document).trigger( 'buttonClick' );
});
$(document).on( 'buttonClick' , function () {
box.text( 'Clicked!' );
});
});
|
로그인 후 복사
1 | .box { background-color: red; }
|
로그인 후 복사
1 2 3 4 | <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 중국어 웹사이트의 기타 관련 기사를 참조하세요!