Bienvenid@s, hoy veremos un método Jquery llamado hasClass muy útil para saber si una clase se encuentra dentro de un elemento, esto puede compatibilizarse con cualquier evento y dependiendo si la clase es encontrada o no, hacer una cosa u otra, es decir, puedes ser conjugado con una sentencia if else para obtener un determinado resultado, por ejemplo, aplicar nuevos estilos, eliminar la clase y reemplazar por una nueva, etc.
Para el código de ejemplo, he creado dos clases, "texto-1" y "texto-2" a las cuales le he agregado la propiedad CSS font-size con valores distintos, en un principio hay un div que contiene la clase "texto-1" y un botón con el cual se capturará el evento click y se comprobará si en el div existe la clase "texto-1", si es cierto, se eliminará y se añadirá la nueva clase "texto-2", de lo contrario se eliminará la clase "texto-2" y se añadirá "texto-1", es decir, se conseguirá un efecto toogle, a través de la comprobación de la existencia de las clases a través del método hasClass.
Código de ejemplo ...
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Como buscar clases en un elemento con Jquery - hasClass</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$("#btn-buscar").bind("click", function(){
if($("div").hasClass("texto-1"))
{
$("div").removeClass("texto-1").addClass("texto-2");
}
else
{
$("div").removeClass("texto-2").addClass("texto-1");
}
});
});
</script>
<style>
.texto-1{font-size: 10px;}
.texto-2{font-size: 20px;}
</style>
</head>
<body>
<h1>By <a href="http://jquery-manual.blogspot.com" target="_blank">http://jquery-manual.blogspot.com</a></h1>
<p>Al hacer click sobre el botón se buscará si la clase "texto-1" se encuentra en el div, si es encontrada se removerá y
añadirá la clase "texto-2", de lo contrario, es decir, si no es encontrada, se removerá la clase "texto-2" y se añadirá "texto-1"</p>
<input type="button" id="btn-buscar" value="Buscar">
<div class="texto-1">Saber si una clase se encuentra en un elemento con Jquery</div>
</body>
</html>
No hay comentarios:
Publicar un comentario