jQuery で CSS クラスの変更に基づいてイベントをトリガーするにはどうすればよいですか?

jQuery での CSS クラス変更時のイベントのトリガー

jQuery では、要素内で CSS クラスが追加または変更されたときにイベントを実行する必要がある場合があります。 。ただし、CSS クラスの変更時にトリガーされる固有のイベントはありません。

カスタム イベント ソリューション

これに対処するには、trigger() 関数を使用してカスタム イベントを呼び出すことができます。 addClass() でクラスを変更すると、カスタム イベントが発生し、特定の要素にバインドできます。

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

コードの別の部分で、カスタム イベントをセレクターにバインドできます。そして、クラス変更が発生したときに実行されるアクションを定義します。

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

実装例

次のコードを考えてみましょう。スニペット:

$(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」クラスが削除されます。これにより、カスタム イベント「buttonClick」がトリガーされ、「box」クラスの div のテキストが「Clicked!」に変更されます

以上がjQuery で CSS クラスの変更に基づいてイベントをトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。