ToggleClass not working properly

Why does my toggleclass not work?

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

(The toggleclass开发者_开发百科() doesnt work, but it should work)

It's working but the styles are getting overriden.

Try with this:

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

Demo: http://jsfiddle.net/xH8ME/3/

If I'm understanding what you want, all you should have to do is place the styles in your css for warnings_receiver_highlight after your styles for userGridViewItem.

I believe your code is working correctly, you just seem to be having an issue with CSS specificity (http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/). One solution would be to add !important to the attributes under .warnings_receiver_highlight

The toggle class is working fine it is your CSS that is messed up I have a corrected fiddle here http://jsfiddle.net/xH8ME/2/

Basically you have the two classes defined below. Since your divs have both classes how does the browser know which background should be applied? Because .userGridViewItem is defined first in the element that is the class that it pulls the background color from. To make this work properly you need to use the !important at the end of the attribute or make your CSS classes more specific like div.warnings_receiver_highlight or .userGridViewItem.warnings_receiver_highlight

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

Place the desired override last. Also, you can apply !important to the style but to ensure that if another is given !important, the sequence will still weigh higher. Your fiddle page also had an extra } at the end.

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