Imprimir Página - Problema con evento en jQuery - Agregar y quitar clases a la misma vez

Título: Problema con evento en jQuery - Agregar y quitar clases a la misma vez
Publicado por: Ali Baba en 4 Octubre 2017, 04:07 am

Tengo este codigo:

Código

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
 
<style>
	.rojo{
		background-color: red;
		color:white;
	}
</style>
</head>
<body>
	<h1>addClass con jQuery</h1>
 
	<script src="jquery-3.2.1.min.js"></script>
	<script>
 
		$(function(){
			console.log("jQuery funciona");
			$('h1').click(function(){
				$(this).addClass('rojo');
				console.log("Clase agregada");
			});
		})
 
 
	</script>
</body>
</html>

que lo que hace es agregar una clase a la etiqueta h1 y lo hace a la perfeccion. Pero como haria si tuviera que quitarle la clase con removeClass tocando ese mismo elemento del DOM? No se como hacerlo :(

Título: Re: Problema con evento en jQuery - Agregar y quitar clases a la misma vez
Publicado por: eLank0 en 4 Octubre 2017, 09:58 am

Pues exactamente igual, cambiando addClass por removeClass.

Salu2

Título: Re: Problema con evento en jQuery - Agregar y quitar clases a la misma vez
Publicado por: Ali Baba en 4 Octubre 2017, 16:37 pm

Cita de: eLank0 en 4 Octubre 2017, 09:58 am

cambiando addClass por removeClass.

Realmente lo que quiero es hacerlo los dos a la misma vez, no cambiando una clase por otra. Lo que quiero es darle clic que se agregue la clase, y cuando le de clic de nuevo que se la quite.

Título: Re: Problema con evento en jQuery - Agregar y quitar clases a la misma vez
Publicado por: cassiani en 4 Octubre 2017, 18:02 pm

Usa hasClass para detectar si el elemento tiene la clase agregada y dependiendo de eso, la quitas o la agregas.

Código:

if ( $(this).hasClass('rojo') ) {
   $(this).removeClass('rojo');
}else{
   $(this).addClass('rojo');
}

Título: Re: Problema con evento en jQuery - Agregar y quitar clases a la misma vez
Publicado por: #!drvy en 4 Octubre 2017, 18:08 pm

Código

$(function(){
    console.log("jQuery funciona");
 
    $('h1').click(function(){
        $(this).toggleClass('rojo');
        console.log("Clase agregada/quitada");
    });
 
});

http://api.jquery.com/toggleclass/

Saludos

Título: Re: Problema con evento en jQuery - Agregar y quitar clases a la misma vez
Publicado por: Ali Baba en 4 Octubre 2017, 18:09 pm

gracias, era eso lo que buscaba, pueden cerrar el tema si quieren

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Ali Baba en 4 Octubre 2017, 04:07 am