Foro de elhacker.NET

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]

Autor

Tema: Problema en jQuery - añadir y quitar clases a la vez (Leído 3,564 veces)

Ali Baba

Desconectado

Mensajes: 310

Problema en jQuery - añadir y quitar clases a la vez

« en: 5 Octubre 2017, 05:30 am »

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

Código

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="css/estilos.css">
	<link rel="stylesheet" href="css/animate.css">
</head>
<body>
	<h1 id="texto" class="animated">Hola Mundo</h1>
 
	<button id="es" class="button">Español</button>
	<button id="en" class="button">English</button>
	<button id="pt" class="button">Portugues</button>
 
 
 
	<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
	<script src="js/main.js"></script>
</body>
</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

$(function(){
	console.log("jQuery esta funcionando");
 
	$('#en').click(function(){
		$('#texto').addClass("flash").text("Hola mundo")
		console.log("Cambiaste a idioma Spanish")
	})
	$('#es').click(function(){
		$('#texto').addClass("flash").text("Hello World")
		console.log("Cambiaste a idioma Ingles")
	})
	$('#pt').click(function(){
		$('#texto').addClass("flash").text("Ola Mundo")
		console.log("Cambiaste a idioma Portugues")
	})
});

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 pm por #!drvy »	En línea

#!drvy

Moderador

Desconectado

Mensajes: 5.855

Re: Problema en jQuery - añadir y quitar clases a la vez

« Respuesta #1 en: 10 Octubre 2017, 15:18 pm »

Elimina la clase flash y añadela de nuevo.

Código

$('#texto').removeClass("flash").addClass("flash").text("....")

Saludos


	En línea

https://www.youtube.com/watch?v=oqKsrSXLR98

Ali Baba

Desconectado

Mensajes: 310

Re: Problema en jQuery - añadir y quitar clases a la vez

« Respuesta #2 en: 20 Octubre 2017, 20:33 pm »

Cita de: #!drvy en 10 Octubre 2017, 15:18 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

    $(function(){
console.log("jQuery esta funcionando");
 
$('#en').click(function(){
  $('#texto').removeClass("flash").addClass("flash").text("Hello World");
  console.log("Cambiaste a idioma Inglés");
})
$('#es').click(function(){
  $('#texto').removeClass("flash").addClass("flash").text("Hola Mundo");
  console.log("Cambiaste a idioma español");
})
$('#pt').click(function(){
  $('#texto').removeClass("flash").addClass("flash").text("Ola Mundo");
  console.log("Cambiaste a idioma Portugues");
})
});

Solo funciona con el primero que toque.


	En línea

ivancea96

Desconectado

Mensajes: 3.412

ASMático

Re: Problema en jQuery - añadir y quitar clases a la vez

« Respuesta #3 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/


	En línea

Code0x66 - Blog de hacking & programación

Páginas: [1]

Ir a:

Mensajes similares
	Asunto	Iniciado por	Respuestas	Vistas	Último mensaje
	añadir y quitar conexiones de red Programación Visual Basic	Banker25	2	1,505	8 Abril 2008, 04:00 am por krackwar
	Como quitar un efecto de jquery Desarrollo Web	:ohk<any>	1	2,471	21 Marzo 2016, 15:26 pm por MinusFour
	¿Cómo añadir parámetros y mensaje de error al código jQuery? Desarrollo Web	Piratings	1	1,945	17 Septiembre 2016, 01:05 am por Jeferi
	Problema con evento en jQuery - Agregar y quitar clases a la misma vez Desarrollo Web	Ali Baba	5	3,164	4 Octubre 2017, 18:09 pm por Ali Baba
	[Pregunta]: Obtener clases con JQUERY Desarrollo Web	Leguim	2	2,274	28 Febrero 2019, 05:17 am por Leguim