Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Diesan Romero en 5 Octubre 2017, 05:30 am



Título: Problema en jQuery - añadir y quitar clases a la vez
Publicado por: Diesan Romero en 5 Octubre 2017, 05:30 am
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?


Título: Re: Problema en jQuery - añadir y quitar clases a la vez
Publicado por: #!drvy en 10 Octubre 2017, 15:18 pm
Elimina la clase flash y añadela de nuevo.

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


Saludos


Título: Re: Problema en jQuery - añadir y quitar clases a la vez
Publicado por: Diesan Romero en 20 Octubre 2017, 20:33 pm
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.


Título: Re: Problema en jQuery - añadir y quitar clases a la vez
Publicado por: ivancea96 en 20 Octubre 2017, 22:20 pm
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/ (https://api.jquery.com/finish/)