jQuery Ajout et suppression de classes sur l'ancre

Je n'arrive pas à comprendre pourquoi je ne peux pas supprimer une classe d'un nouveau, puis en ajouter un nouveau. Je peux changer son CSS en utilisant .css (...) mais en utilisant .removeClass et .addClass ne semblent pas fonctionner. J'utilise l'ajout et la suppression de classes sur certaines envergures et cela fonctionne très bien. Quelqu'un sait ce que je fais mal? Merci beaucoup!jQuery Ajout et suppression de classes sur l'ancre

le code html

<ul id="menu"> 
    <li><span>&nbsp;</span><span><a href="#">Home</a></span></li> 
    <li><span>&nbsp;</span><span><a href="#">Test</a></span></li> 
    <li><span>&nbsp;</span><span><a href="#">Test</a></span></li> 
    <li><span>&nbsp;</span><span><a href="#">LaLa</a></span></li> 
    <li><span>&nbsp;</span><span><a href="#">Test</a></span></li> 
    <li><span>&nbsp;</span><span><a href="#">Blah</a></span></li> 
</ul>

le css

.menuText{ 

    text-decoration: none; 
    color: red; 

} 

.menuTextA{ 
    text-decoration: none; 
    color: #1A4588; 
}

le jquery

$('li', 'ul#menu').each(function() { 

       $(this).mouseover(function() { 

        $('span', this).eq(0).removeClass('menuTabLeft'); // works 
        $('span', this).eq(1).removeClass('menuTabRight'); // works 

        $('span', this).eq(0).addClass('menuTabLeftA'); // works 
        $('span', this).eq(1).addClass('menuTabRightA'); // works 

        //$('a', this).eq(0).removeClass('menuText'); // doesnt work 
        //$('a', this).eq(0).addClass('menuTextA'); // doesnt work 

        $('a', this).eq(0).css('color', '#1A4588'); // works 
    }); 
});

Source

2009-10-13 Gabe

Si je copier et coller le code dans une page de test et décommenter les parties commentées, et supprimer la ligne de // travaux, cela fonctionne comme prévu. Donc le problème n'est pas avec votre code. –

Je suppose que vous avez d'autres règles CSS qui remplacent .menuText/.menuTextA – Greg

Avez-vous désactivé JS? – powtac

Que diriez-vous cela pour une solution rapide:

$("#menu li").each(function() { 
    $(this).mouseover(function() { 
     var elems = $("span", this); 
     $(elems[0]).removeClass("menuTabLeft").addClass("menuTabLeftA"); 
     $(elems[1]).removeClass("menuTabRight").addClass("menuTabRightA"); 
     $('a', this).removeClass("menuText").addClass("menuTextA"); 
    }); 
});

Mais pour une meilleure solution (pas de script nécessaire):

#menu a { 
    text-decoration: none; 
    color: red; 
    font-size: 30px; 
} 

#menu a:hover{ 
    text-decoration: none; 
    color: #1A4588; 
    font-size: 60px; 
}

Source

2009-10-15 13:51:14 Fenton

pourquoi ne pas simplement utiliser le CSS sélecteur psuedo?

.menuText:hover{ 
    text-decoration: none; 
    color: #1A4588; 
}

Source

2009-10-13 18:04:42 ErsatzRyan

jQuery Ajout et suppression de classes sur l'ancre

Répondre

Questions connexes