Cambiar fondo al añadir class a un div (background-color)

[Servia]

Buenas!

Tengo una duda CSS+HTML+jQuery:

Mi código:

Código (html4strict) [Seleccionar] Expandir

<div onclick="$(this).css('background-color','grey')">Al hacer clic cambiará a gris oscuro</div>

El usuario hace clic y efectivamente cambia a gris oscuro, o sea con $().css funciona.

Por contra si tengo:

Código (html4strict) [Seleccionar] Expandir


<style type="text/css">
.gris
{
background-color:#CCCCCC;
}
</style>
<div onclick="$(this).toggleClass('gris')">Al hacer clic cambiará a gris oscuro</div>

No funciona, cómo hago que funcione? Cual es el error?

[WHK]

con attr('class', 'gris);

[Servia]

con attr('class', 'gris);

En caso de que ya tengo un class, se lo carga no? con el toggle se mantendrían ambos no?

[WHK]

exacto, togle añade a menos que agregues un true o false como segundo argumento para reemplazar

<div class="tumble">Some text.</div>
     

The first time we apply $('div.tumble').toggleClass('bounce'), we get the following:

<div class="tumble bounce">Some text.</div>
     

Tu problema es que talves uses una clase y le agregues la segunda clase con valores duplicados.

Dale un vistazo a la consola de errores de firefox para ver si te reconoce los atributos duplicados o si no usa firebug, es mucho mas fácil porque ves en tiempo real como ha quedado la división, con que clases y si le das click a la división te mostrará todos sus atributos de estilo con la fuente de cáda clase asociada y una ralla en cada atributo inválido.

[Servia]

En la otra class sólo tengo margins. La consola de errores no marca nada