Alternar clases en un elemento con el método toggleClass()
Para poder alternar una clase en un elemento del documento DOM, es decir, que con un evento apliquemos la clase, pero que también podamos quitarla, utilizamos el método toggleClass().$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
En el siguiente ejemplo aplicamos y removemos cada clase con un botón correspondiente:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Alternar Clases</title>
<style>
.texto{
text-align:center;
}
.rojo{
color:red;
}
.autor{
text-align:right;
font-style:italic;
color:black;
}
.caja{
width:300px;
background-color:#FF9;
border:solid 2px black;
height:200px;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
$("#cajaBtn").click(onCaja);
$("#autorBtn").click(onAutor);
$("#textoBtn").click(onTexto);
$("#borrarBtn").click(onBorrar);
$("#rojoBtn").click(onRojo);
}
function onCaja(){
$("div").toggleClass("caja");
}
function onAutor(){
$("#autor").toggleClass("autor");
}
function onTexto(){
$("p").toggleClass("texto rojo");
}
function onRojo(){
$("p").removeClass("rojo");
}
function onBorrar(){
$("p").removeClass("texto rojo");
$("div").removeClass("caja");
$("#autor").removeClass("autor");
}
</script>
</head>
<body>
<div>
<p>En el agua clara</p>
<p>que brota en la fuente</p>
<p>un lindo pescado</p>
<p>sale de repente</p>
<p id="autor">Autor anónimo</p>
</div>
<input type="button" value="Estilo caja" id="cajaBtn"/>
<input type="button" value="Estilo texto" id="textoBtn"/>
<input type="button" value="Estilo autor" id="autorBtn"/>
<input type="button" value="Borrar estilo" id="borrarBtn"/>
<input type="button" value="Quitar rojo" id="rojoBtn"/>
</body>
</html>
Ejemplo: http://pacoarce.com/jQuery/ToggleClass.html
Curso completo: https://www.udemy.com/jquery-y-mobile/
No hay comentarios:
Publicar un comentario