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

Diesan Romero · 5 Octubre 2017, 05:30 AM

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

Código (html4strict) [Seleccionar]


<!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 (javascript) [Seleccionar]


$(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?

#!drvy · 10 Octubre 2017, 15:18 PM

Elimina la clase flash y añadela de nuevo.

Código (javascript) [Seleccionar]

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

Saludos

Diesan Romero · 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 (javascript) [Seleccionar]

    $(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.

ivancea96 · 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/

Test Foro de elhacker.net SMF 2.1

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

Diesan Romero

#!drvy

Diesan Romero

ivancea96