elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado: ¿Usas Skype? Protégete de los Skype Resolver


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Problema en jQuery - añadir y quitar clases a la vez
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Problema en jQuery - añadir y quitar clases a la vez  (Leído 276 veces)
magodiesan

Desconectado Desconectado

Mensajes: 198


ART.EST.IMPERIUS.ORBIS.UNIVERSUS


Ver Perfil WWW
Problema en jQuery - añadir y quitar clases a la vez
« en: 5 Octubre 2017, 05:30 »

A ver si me explico, tengo el siguiente codigo html:

Código
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <link rel="stylesheet" href="css/estilos.css">
  5. <link rel="stylesheet" href="css/animate.css">
  6. </head>
  7. <h1 id="texto" class="animated">Hola Mundo</h1>
  8.  
  9. <button id="es" class="button">Español</button>
  10. <button id="en" class="button">English</button>
  11. <button id="pt" class="button">Portugues</button>
  12.  
  13.  
  14.  
  15. <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
  16. <script src="js/main.js"></script>
  17. </body>
  18. </html>

la idea es que al tocar un boton el texto cambie, haciendo una animacion, a otro idioma segun el boton que toquen. Para eso he creado este codigo en jQuery:

Código
  1. $(function(){
  2. console.log("jQuery esta funcionando");
  3.  
  4. $('#en').click(function(){
  5. $('#texto').addClass("flash").text("Hola mundo")
  6. console.log("Cambiaste a idioma Spanish")
  7. })
  8. $('#es').click(function(){
  9. $('#texto').addClass("flash").text("Hello World")
  10. console.log("Cambiaste a idioma Ingles")
  11. })
  12. $('#pt').click(function(){
  13. $('#texto').addClass("flash").text("Ola Mundo")
  14. console.log("Cambiaste a idioma Portugues")
  15. })
  16. });
  17.  

como pueden ver, yo agrego la clase flash al elemento con el id texto, que en este caso es el h1, y luego le cambio el texto. Hasta ahi todo bien, pero hay un problema. Cuando voy toco otro boton, el elemento h1 ya tiene la clase flash agregada, por lo que aunque la vuelva agregar, la animacion no se ejecuta.
Que puedo hacer para que la animacion se ejecute cada vez que yo toque los botones?


« Última modificación: 10 Octubre 2017, 15:19 por #!drvy » En línea

Arte Es El Imperio de la Orbita del Universo
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 4.670



Ver Perfil WWW
Re: Problema en jQuery - añadir y quitar clases a la vez
« Respuesta #1 en: 10 Octubre 2017, 15:18 »

Elimina la clase flash y añadela de nuevo.

Código
  1. $('#texto').removeClass("flash").addClass("flash").text("....")


Saludos


En línea

magodiesan

Desconectado Desconectado

Mensajes: 198


ART.EST.IMPERIUS.ORBIS.UNIVERSUS


Ver Perfil WWW
Re: Problema en jQuery - añadir y quitar clases a la vez
« Respuesta #2 en: 20 Octubre 2017, 20:33 »

Elimina la clase flash y añadela de nuevo.

Se lo agrego a todos los idiomas pero no funciona, así lo tengo:

Código
  1.    $(function(){
  2. console.log("jQuery esta funcionando");
  3.  
  4. $('#en').click(function(){
  5.  $('#texto').removeClass("flash").addClass("flash").text("Hello World");
  6.  console.log("Cambiaste a idioma Inglés");
  7. })
  8. $('#es').click(function(){
  9.  $('#texto').removeClass("flash").addClass("flash").text("Hola Mundo");
  10.  console.log("Cambiaste a idioma español");
  11. })
  12. $('#pt').click(function(){
  13.  $('#texto').removeClass("flash").addClass("flash").text("Ola Mundo");
  14.  console.log("Cambiaste a idioma Portugues");
  15. })
  16. });

Solo funciona con el primero que toque.
En línea

Arte Es El Imperio de la Orbita del Universo
ivancea96


Desconectado Desconectado

Mensajes: 3.270


ASMático


Ver Perfil WWW
Re: Problema en jQuery - añadir y quitar clases a la vez
« Respuesta #3 en: 20 Octubre 2017, 22:20 »

No sé qué tiene la clase flash, pero si es una animación, quizás con .finish() para acabar la animación logres que empiece desde el principio. removeClass -> finish -> addClass.
https://api.jquery.com/finish/
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines