Cambiar class con jquery.

[andy82]

Por favor necesito ayuda urgente con algo que me lleva mas de un mes y no consigo hacerlo.
Tengo el evento onclick a un span con una class que muestra una imagen(ojo opaco) y al darle click me envía dos variables al archivo externo jquery, y este hacia otro php, este último me realiza la consulta a la base de datos: si los datos no están los inserta y si están los borra. Hasta ahí bien, pero además quisiera que me cambie el class del span a otra imagen(ojo con color).
Se trata de marcar los capítulos vistos de una serie. Los datos que envío son idusuario e idvideo. Ya tiene la condición de si es usuario logeado. Son varios los span, en dependencia de cuantos capítulos halla.

¿Cómo logro que jquery me cargue la class correspondiente a cada span, si ha sido visto o no por el usuario, comprobándolo si están los id en una tabla de la base de datos?

¿Cual debe ser el código del jquery para cambiar los span con el evento onclick, si estos tienen un id variable(idusuario_idvideo)?

Espero enormemente la ayuda de alguien.
Sdos

[xdvegax]

No se exactamente si es lo que pides, pero con jquery puedes añadir clases y quitarle clases a cualquier elemento de tu html.

Para esto necesitas .addclass() o .removeclass(), aquí puedes leer mas información.

https://jqueryui.com/addClass/

saludos.

[andy82]

Hola
Gracias por responder tan rápido. Eso ya lo he hecho, valido con hasClass si tiene una clase u otra y la cambio con addClasss.
pero la cosa debe ir más allá.
Por ejemplo: tengo 10 capítulos, uno debajo de otro y cada uno con su imagen. Al darle click a cualquiera me cambia solamente la imagen del primero. Por ello creo que el id del span debe ser diferente para cada uno.
Pero la pregunta es ¿cómo le digo al script que verifique ese id(que es variable y distinto para todos), o sea como se lo paso al archivo jquery? Y cómo hago para que permanezca después de refrescar la página.

[Alexis88]

Para evitar el problema con los Id, toma el elemento al que le has dado clic con la propiedad target del evento click. Un pequeño ejemplo:

Código HTML:

<span id = 1>Uno</span>
<span id = 2>Dos</span>
<span id = 3>Tres</span>
<span id = 4>Cuatro</span>
<span id = 5>Cinco</span>
 

Código CSS:

span{
    background: green;
    color: white;
    font-size: 1.5em;
    display: block;
    margin-bottom: .5em;
    text-align: center;
    cursor: pointer;
}
 
.red{
    background: red;
}
 

Código Javascript:

$(window).click(function(e){
    if (e.target.tagName == "SPAN")
        if (!$(e.target).hasClass("red"))
            $(e.target).addClass("red");
        else
            $(e.target).removeClass("red");
});
 

Cuando le des clic a alguno de los <span>, originalmente tomará la clase red y cambiará el color de fondo, pero si le vuelve a dar clic, se le quitará dicha clase y tomará nuevamente el color verde.

Aquí lo puedes ver en funcionamiento: http://jsfiddle.net/x8aLZ/

Saludos

[andy82]

Muchísimas gracias Alexis88, eres un genio, me ha funcionado de maravilla.

Solo me va quedando una parte muy importante y es guardar esa class para cuando se refresque la página, o salga y vuelva a entrar cada span tenga su class correspondiente, dentro de ese usuario. Y que no sea guardando en cookies porque al limpiarlas desaparecen.

¿Sabes algo de esto?

[Alexis88]

Bueno, estamos trabajando del lado del cliente, de modo que cualquier cambio que hagas y no lo guardes en un repositorio (base de datos), no surtirá efecto cuando el usuario refresque la página o ingrese nuevamente a ella.

Saludos