Problema con evento en jQuery - Agregar y quitar clases a la misma vez

Diesan Romero · 4 Octubre 2017, 04:07 AM

Tengo este codigo:

Código (html4strict) [Seleccionar]


<!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

eLank0 · 4 Octubre 2017, 09:58 AM

Pues exactamente igual, cambiando addClass por removeClass.

Salu2

Diesan Romero · 4 Octubre 2017, 16:37 PM

Cita de: eLank0 en 4 Octubre 2017, 09:58 AMcambiando 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.

cassiani · 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 [Seleccionar]

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

#!drvy · 4 Octubre 2017, 18:08 PM

Código (javascript) [Seleccionar]

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

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

Saludos

Diesan Romero · 4 Octubre 2017, 18:09 PM

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

Test Foro de elhacker.net SMF 2.1

Problema con evento en jQuery - Agregar y quitar clases a la misma vez

Diesan Romero

eLank0

Diesan Romero

cassiani

#!drvy

Diesan Romero