Tengo este codigo:
<!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 :(
Pues exactamente igual, cambiando addClass por removeClass.
Salu2
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.
Usa hasClass para detectar si el elemento tiene la clase agregada y dependiendo de eso, la quitas o la agregas.
if ( $(this).hasClass('rojo') ) {
$(this).removeClass('rojo');
}else{
$(this).addClass('rojo');
}
$(function(){
console.log("jQuery funciona");
$('h1').click(function(){
$(this).toggleClass('rojo');
console.log("Clase agregada/quitada");
});
});
http://api.jquery.com/toggleclass/
Saludos
gracias, era eso lo que buscaba, pueden cerrar el tema si quieren