hasClassdevuelve true o false según exista o no la clase sobre la que estamos preguntandoaddClassañade la clase que indiquemosrevomeClasselimina la clase que indiquemos
En el siguiente enlace se encuentra el caso práctico disponible.
HTML
Comenzamos con una página con dos
Tenemos dos
h1, dos párrafos y un botón. |
| antes de pulsar el botón |
h1 con id diferentes como es lógico y con una clase común denominada 'mititulo'. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery seleccionando</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1 id="titulo1" class="mititulo">Congreso</h1>
<p id="parrafo1">Párrafo uno.</p>
<h1 id="titulo2" class="mititulo">Senado</h1>
<p id="parrafo2">Párrafo dos.</p>
<hr>
<br>
<button id="boton">Púlsame</button>
</body>
</html>
JavaScript + jQuery
Al pulsar el botón cambia el CSS de la página y en consola vemos algunas frases.
En la línea 7 tenemos un código que permite centrar y poner con fondo amarillo aquellos elementos cuya clase sea
Nos metemos en un condicional
Al ser la condición
 |
| después de pulsar el botón |
 |
| Consola después de pulsar el botón |
'mititulo'. Estos elementos son los dos h1: Congreso y Senado.Nos metemos en un condicional
if en el que la condición se cumple si el elementos que tiene el id='titulo1' tiene además la clase 'mititulo'. Este elemento es el primer h1 si si cumple ambos requisitos.Al ser la condición
true lo que se produce es que removemos la clase 'mititulo' del elemento cuyo id es 'titulo1'. Esto es, eliminamos la clase del primer h1. // hasClass devuelve true o false según tenga o no cierta clase
// addClass añade un clase
// removeClass elimina una clase
'use strict'
$(function(){
$("#boton").click( function() {
$('.mititulo').css({'background':'yellow','text-align':'center'})
if ($('#titulo1').hasClass('mititulo')){
console.log("Si tiene la clase mititulo");
$('#titulo1').removeClass('mititulo');
console.log("Comprobemos que hemos eliminado la clase del primer h1");
console.log("La clase del 1º h1 es: "+$('h1').eq(0).attr('class'));
console.log("La clase del 2º h1 es: "+$('h1').eq(1).attr('class'));
console.log("Comprobado: la clase del 1er h1 ha sido removida.");
}else{
console.log("No tiene la clase mititulo");
$('#titulo1').removeClass();
$('#titulo1').addClass('tituloprincipal');
console.log("La clase del 1er h1 es: "+$('h1').eq(0).attr('class'));
}
});
});
Como el condicional
if también tiene un else y queremos ver que sucede cuando la condición no se cumple, lo que haremos es añadir una x a la clase del primer h1, suponiendo que hos hemos equivocado al escribir su clase en el código html. En la siguiente imagen se ve cómo nos hemos equivocado añadiendo esa x adicional a la clase del primer h1.
En este caso lo que vemos por pantalla al pulsar el botón es la siguiente imagen.
 |
Cometiendo un error en la clase del primer h1y después de pulsar el botón |
h1 no es 'mititulo' sino 'mititulox' al haber cometido un error en el código html.Lo que vemos ahora es que por consola se arrojan la siguientes líneas.
Añadir una clase sin haber removido la previa
¿Qué sucede si ya existe una clase previa en elh1 y sin removerla añadimos otra?He realizado esta comprobación y lo que se obtiene es que la nueva clase esta formada por la siguiente expresión:
clase original + un espacio vacio + nueva clase
Veamos una imagen con el resultado.
 |
pulsando F12 vemos el Inspector de Firefox |
Ejercicio propuesto
- En el código html indique la clase del primer
h1es'mititulox'. Esto supone, que nos hemos equivocado al escribir la clase y que hemos añadido laxfinal. - En el código JS después del else comente la línea que remueve la clase.
- Muestre en consola tres líneas donde se pregunte si en el primer
h1existen las clases:
.mititulo.mititulox.tituloprincipal
¿Lo ha resuelto empleando
.hasClass?
No hay comentarios:
Publicar un comentario