Foros del Web » Programando para Internet » Jquery »

Cambiar class con jquery.

Estas en el tema de Cambiar class con jquery. en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/02/2014, 05:30
 
Fecha de Ingreso: mayo-2013
Ubicación: Alicante
Mensajes: 35
Antigüedad: 10 años, 9 meses
Puntos: 0
Cambiar class con jquery.

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

Última edición por andy82; 18/02/2014 a las 05:32 Razón: poner notificación instantánea
  #2 (permalink)  
Antiguo 18/02/2014, 05:38
 
Fecha de Ingreso: diciembre-2012
Mensajes: 7
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Cambiar class con jquery.

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.
  #3 (permalink)  
Antiguo 18/02/2014, 06:42
 
Fecha de Ingreso: mayo-2013
Ubicación: Alicante
Mensajes: 35
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Cambiar class con jquery.

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.
  #4 (permalink)  
Antiguo 18/02/2014, 08:39
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Cambiar class con jquery.

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:
Ver original
  1. <span id = 1>Uno</span>
  2. <span id = 2>Dos</span>
  3. <span id = 3>Tres</span>
  4. <span id = 4>Cuatro</span>
  5. <span id = 5>Cinco</span>

Código CSS:
Ver original
  1. span{
  2.     background: green;
  3.     color: white;
  4.     font-size: 1.5em;
  5.     display: block;
  6.     margin-bottom: .5em;
  7.     text-align: center;
  8.     cursor: pointer;
  9. }
  10.  
  11. .red{
  12.     background: red;
  13. }

Código Javascript:
Ver original
  1. $(window).click(function(e){
  2.     if (e.target.tagName == "SPAN")
  3.         if (!$(e.target).hasClass("red"))
  4.             $(e.target).addClass("red");
  5.         else
  6.             $(e.target).removeClass("red");
  7. });

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
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 18/02/2014 a las 08:51
  #5 (permalink)  
Antiguo 18/02/2014, 10:51
 
Fecha de Ingreso: mayo-2013
Ubicación: Alicante
Mensajes: 35
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Cambiar class con jquery.

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?
  #6 (permalink)  
Antiguo 18/02/2014, 11:04
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Cambiar class con jquery.

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
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: javascript, marcar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:44.