jQuery faire quelque chose quand la classe a ajouté la classe

J'ai un li avec la classe 'tab3'. Il y a jQuery ailleurs que lorsque vous passez dessus, il ajoute la classe 'selected'. Je veux faire quelque chose lorsque cela se produit:jQuery faire quelque chose quand la classe a ajouté la classe

<li class='tab3 selected'> 
    <div class='showme'>Show this</div> 
    <div class='addattr'>Add attributes</div> 
</li> 

$('.tab3.selected').each(function() { 
    $('.showme').show(); 
    $('.addattr').attr('style', 'position:relative; display:block'); 
});

Source

2011-11-14 ToddN

Vous devez trouver où la fonction de vol stationnaire est et ajoutez y votre code. OU implémentez une autre fonction de survol vous-même. –

Ce n'est vraiment pas la bonne façon de définir le "style" sur un élément. Recherchez la méthode jQuery ".css()" et utilisez-la. Ce réglage peut même ne pas fonctionner (dans certains navigateurs). – Pointy

Pointy, ci-dessous, vous a donné la meilleure réponse en ce qui concerne jQuery. Cependant, d'abord: votre exemple, en lui-même, a quelques défauts: les divs sont déjà affichés (à moins que showme ait un css d'affichage: none); deuxièmement, si les deux showme et addattr ont un css d'affichage: none; le hover ne se produira jamais puisque tout le li est caché. Geehs, tant d'écarts ici; et, enfin, css: hover est la meilleure façon de gérer des choses simples comme celles-ci. –

Vous pouvez accomplir cela via css:

<style type="text/css"> 
    .tab3 .showme{display:none;} 
    .tab3.selected .showme{display:block;} 
</style>

Source

2011-11-14 20:40:54 streetlogics

J'aime cette approche, et [voici un violon pour jouer avec elle] (http://jsfiddle.net/Nrvfw/) – roselan

Il n'y a aucun moyen intégré pour le faire, mais vous pouvez toujours enregistrer un gestionnaire d'événements pour un événement « personnalisé » comme « classe changement », puis déclencheur que chaque fois que vous mettez à jour la classe d'un élément. (Vous pouvez même redéfinir la fonction « addClass » de le faire.)

$('whatever').addClass('selected').trigger('class-change'); 

// ... 

$('.tab3').bind('class-change', function() { 
    $('.tab3.selected').each(function() { 
    $('.showme').show(); 
    $('.addattr').attr('style', 'position:relative; display:block'); 
    }); 
});

Bien sûr, vous devriez également envisager d'utiliser les anciennes règles CSS simples pour faire des apparitions changer lors de l'ajout/suppression des classes, comme il est indiqué dans la réponse de @Brad Wedell .

Source

2011-11-14 20:40:36 Pointy

hein? pourquoi ne pas appeler directement les changements dans le hover bind? S'il n'a pas accès à la fonction de liaison hover qui ajoute la classe sélectionnée, je ne vois pas qu'il peut déclencher le changement de classe sur addClass(). – roselan

L'idée est que simplement en déclenchant un événement, le code qui change la classe n'a pas besoin de connaître les détails de l'autre code. C'est une technique de découplage. Pour déclencher l'événement "class-change" dans "addClass()", il faudrait que le stock "addClass()" soit remplacé par un wrapper. – Pointy

oui, mais encore, l'idée principale reste. S'il n'a pas accès à la fonction qui lie hover pour exécuter addClass, il ne peut pas déclencher l'événement personnalisé. Si a accès, alors bien sûr c'est une manière élégante;) – roselan

jQuery faire quelque chose quand la classe a ajouté la classe

Répondre

Questions connexes