ToggleClass ne fonctionne pas correctement

Question

Pourquoi mon toggleclass ne fonctionne pas?

http://jsfiddle.net/xH8ME/1/

(Le travail toggleclass() ne marche pas, mais il devrait fonctionner)

Answer 1

Il fonctionne, mais les styles sont s'outrepassée.

Essayez avec ceci:

.warnings_receiver_highlight { 
    background: #000 !important; 
    color: #000 !important; 
} 

Démo: http://jsfiddle.net/xH8ME/3/

Answer 2

La classe bascule fonctionne bien, il est votre CSS qui est foiré, j'ai un violon corrigé ici http://jsfiddle.net/xH8ME/2/

Fondamentalement vous avez les deux classes définies ci-dessous. Puisque vos divs ont les deux classes, comment le navigateur sait-il quel arrière-plan devrait être appliqué? Parce que .userGridViewItem est défini en premier dans l'élément qui est la classe dont il tire la couleur d'arrière-plan. Pour faire ce travail correctement, vous devez utiliser le !important à la fin de l'attribut ou faire vos classes CSS plus spécifiques comme div.warnings_receiver_highlight ou .userGridViewItem.warnings_receiver_highlight

.warnings_receiver_highlight{ 
    background: #000; 
    color: #000; 
} 
.userGridViewItem{ 
    background: brown; 
    color: #fff; 
    width: 200px; 
    height: 100px; 
} 

Answer 3

Je crois que votre code fonctionne correctement, vous semble juste être avoir un problème avec la spécificité CSS (http: //coding.smashingmagazine. com/2007/07/27/css-specificity-choses-vous-devez-savoir /). Une solution serait d'ajouter !important aux attributs sous .warnings_receiver_highlight

Answer 4

Si je comprends ce que vous voulez, tout ce que vous devriez avoir à faire est de placer les styles dans votre css pour warnings_receiver_highlight après vos styles pour userGridViewItem.

Answer 5

Placez le remplacement souhaité en dernier. En outre, vous pouvez appliquer! Important pour le style mais pour s'assurer que si un autre est donné! Important, la séquence pèsera encore plus haut. Votre page de violon a également eu un } supplémentaire à la fin.

.userGridViewItem{ 
    background: brown; 
    color: #fff; 
    width: 200px; 
    height: 100px; 
} 
.warningYellow{ 
    border: 3px solid yellow; 
} 
.warnings_receiver_highlight{ 
    background: #000 !important; 
    color: #000 !important; 
}