Wie kann ich Ereignisse basierend auf CSS-Klassenänderungen in jQuery auslösen?

Ereignisse bei CSS-Klassenänderungen in jQuery auslösen

In jQuery kann es vorkommen, dass Sie ein Ereignis ausführen müssen, wenn eine CSS-Klasse innerhalb eines Elements hinzugefügt oder geändert wird . Es gibt jedoch kein inhärentes Ereignis, das bei einer CSS-Klassenänderung ausgelöst wird.

Lösung für benutzerdefinierte Ereignisse

Um dieses Problem zu beheben, können Sie mit der Funktion trigger() ein benutzerdefiniertes Ereignis aufrufen. Wenn Sie die Klasse mit addClass() ändern, lösen Sie das benutzerdefinierte Ereignis aus, das dann an bestimmte Elemente gebunden werden kann.

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

In einem anderen Teil des Codes können Sie das benutzerdefinierte Ereignis an einen Selektor binden und definieren Sie die Aktionen, die ausgeführt werden sollen, wenn die Klassenänderung auftritt.

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

Beispielimplementierung

Bedenken Sie den folgenden Code 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>

In diesem Beispiel wird die Klasse „Box“ entfernt, wenn auf die Schaltfläche geklickt wird. Dies löst das benutzerdefinierte Ereignis „buttonClick“ aus, das den Text des Div mit der „Box“-Klasse in „Clicked!“ ändert.

Das obige ist der detaillierte Inhalt vonWie kann ich Ereignisse basierend auf CSS-Klassenänderungen in jQuery auslösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!