jQuery pas et classes

Question

J'ai 2 liens d'ancre (un.selector) et quand on est cliqué il a une classe appliquée à 'active-arrow' et le clic supprime également la classe du même nom de l'autre ancre ainsi que l'abaissement de l'opacité à 0,2. Je veux ensuite avoir un effet de fondu lorsque l'utilisateur passe au-dessus de l'ancre qui n'a pas de 'flèche active' appliquée de sorte qu'il passe à l'opacité complète quand mouseenters et retour à 0.2 quand mouseleaves.

Le problème im avoir est que les deux .pas et : non ne semblent pas fonctionner comme prévu, les travaux d'effet de vol stationnaire, mais si je clique sur l'ancre tout en planant la classe « flèche active » est appliqué mais lorsque l'option Mousel est activée, l'opacité est à nouveau réduite à 0.2 même si la classe 'active-arrow' est appliquée. De plus, le survol ne fonctionne pas pour l'autre, un lien qui a 'active-arrow' a été supprimé.

Un peu difficile à expliquer, donc voici un code qui, espérons-le, nous aide un peu.

*//If a.selector doesn't have the class 'active-arrow' then run the hoverFade function* 
$("a.selector").not(".active-arrow").hoverFade(); 

//Functions for first element 
     $('a.selector-1').click(function() { 
      $('a.selector-2').removeClass('active-arrow'); //Remove background image from corresponding element 
      $('ul#storage-items-2').fadeOut(1200).addClass('hide'); //Fade out then hide corresponding list 
      $(this).addClass('active-arrow', 'fast'); //Add background image to current element 
      $('ul#storage-items-1').removeClass('hide').fadeIn(1800); //Unhide and fade in the list 
      $('a.selector-2').fadeTo(500, 0.2); //Fade corresponding element 
      $(this).fadeTo(800, 1);//Fade this element to full opacity 
     }); 

Je n'inclus le code pour Teh première ancre (a.selector-1) comme le code pour la deuxième ancre est identique, mais change juste les noms de classe à a.selector-2.

La fonction hoverFade est également dans un fichier séparé afin que nous puissions la réutiliser.

jQuery.fn.hoverFade = function() { 
return this.each(function(){ 
     $(this).hover(
       function() { 
        $(this).fadeTo(500, 0.8); 
      }, 
       function() { 
        $(this).fadeTo(500, 0.2); 
     }); 
    }); 

}

Chaque lien d'ancrage se fane et disparaît une UL aussi bien.

Toute aide est très appréciée

Merci

Giles

Answer 1

Ceci est un cas où vous souhaitez utiliser .live() ou .delegate(), comme ceci:

$("a.selector:not(.active-arrow)").live('mouseenter', function() { 
    $(this).fadeTo(500, 0.8); 
}).live('mouseleave', function() { 
    $(this).fadeTo(500, 0.2); 
}); 

Si vous utilisez .delegate() la ligne du haut ressemblerait à ceci (ID = ID du parent partagé à tous ces liens):

$("#ID").delegate("a.selector:not(.active-arrow)", 'mouseenter', function() { 

La raison pour ce que vous avez actuellement ne fonctionne pas est qu'il lie le gestionnaire d'événements aux éléments, les éléments ne devaient correspondre à la sélection que vous avez utilisé lorsque vous les avez trouvés pour la liaison, une fois cela se produit, les gestionnaires d'événements .hover()mouseenter et mouseleave sont liés à cet élément. Le fait que la classe change plus tard n'a pas vraiment d'importance, les gestionnaires sont là pour rester.

En utilisant l'approche ci-dessus, les événements ne sont pas réellement sur les éléments directement, ils sont assis sur un parent, document dans le cas de .live() ou #ID dans le cas de .delegate(). Lorsque les événements de la souris se produisent sur un élément, ils apparaissent, et le parent les voit, vérifie si le sélecteur correspondant à ce gestionnaire correspond à puis à, et si c'est le cas, il s'exécute. Cela fait que la classe change réellement de matière, car elle est vérifiée quand l'événement se produit, plutôt que quand elle était liée.