Comment puis-je déclencher des événements basés sur des modifications de classe CSS dans jQuery ?

Déclenchement d'événements lors de modifications de classe CSS dans jQuery

Dans jQuery, vous pouvez rencontrer le besoin d'exécuter un événement lorsqu'une classe CSS est ajoutée ou modifiée dans un élément . Cependant, aucun événement inhérent ne se déclenche lors d'un changement de classe CSS.

Solution d'événement personnalisé

Pour résoudre ce problème, vous pouvez invoquer un événement personnalisé à l'aide de la fonction trigger(). Lorsque vous modifiez la classe avec addClass(), vous déclenchez l'événement personnalisé, qui peut ensuite être lié à des éléments spécifiques.

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

Dans une autre partie du code, vous pouvez lier l'événement personnalisé à un sélecteur et définissez les actions à exécuter lorsque le changement de classe se produit.

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

Exemple d'implémentation

Considérez le code suivant extrait :

$(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>

Dans cet exemple, lorsque l'on clique sur le bouton, la classe "box" est supprimée. Cela déclenche l'événement personnalisé "buttonClick", qui modifie le texte du div avec la classe "box" en "Clicked!"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!