Clase de reemplazo de jQuery
-
Utilice
removeClass()yaddClass()para reemplazar una clase en jQuery -
Use
attr()para reemplazar una clase en jQuery
Este tutorial demuestra cómo reemplazar una clase en jQuery.
jQuery no proporciona un método integrado para reemplazar las clases de elementos HTML, pero proporciona otros métodos que se pueden usar para lograr la funcionalidad de reemplazo de clases. Este tutorial demuestra diferentes métodos para reemplazar una clase con otra clase usando jQuery.
Utilice removeClass() y addClass() para reemplazar una clase en jQuery
La función removeClass() se usa para eliminar una clase del elemento en jQuery y el método addClass() agregará una clase al elemento HTML. Estas clases se pueden implementar juntas para crear un método replaceClass.
Sintaxis para el método removeClass():
$(Selector).removeClass(Class);
Sintaxis para el método addClass():
$(Selector).addClass(Class);
Arriba, la clase es el nombre de la clase que se eliminará o agregará. Usando ambos métodos, podemos crear una función replaceClass; probemos un ejemplo.
<html lang="en">
<head>
<meta charset="utf-8">
<title> Remove and Add in jQuery. </title>
<style>
.light_blue {
background-color: lightblue;
}
.dark_blue {
background-color: darkblue;
}
div {
width: 400px;
height: 400px;
border: 5px solid lightgreen;
}
button {
margin: 15px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div id="demoDiv" class="light_blue"></div>
<button id="darkblue">Dark Blue</button>
<button id="lightblue">Light Blue</button>
<script>
function replaceClass(Element_Id, Class1, Class2) {
var HTML_Element = $(`#${Element_Id}`);
if (HTML_Element.hasClass(Class1)) {
HTML_Element.removeClass(Class1);
}
HTML_Element.addClass(Class2);
}
$(document).ready(function() {
$("#darkblue").click(function() {
replaceClass("demoDiv", "light_blue", "dark_blue");
});
$("#lightblue").click(function() {
replaceClass("demoDiv", "dark_blue", "light_blue");
});
});
</script>
</body>
</html>
El código anterior crea la función replaceClass que utiliza los métodos removeClass y addClass para reemplazar una clase de un elemento HTML.
La función replaceClass() toma tres parámetros, primero es la identificación del elemento, segundo es la clase que se reemplazará y tercero es la clase que reemplazará a la clase dada. Ver la salida:
Del mismo modo, si queremos reemplazar varias clases, podemos poner espacios en los métodos removeClass y addClass y luego poner los nombres de otras clases. Veamos un ejemplo.
<html lang="en">
<head>
<meta charset="utf-8">
<title> Remove and Add in jQuery. </title>
<style>
.light_blue {
background-color: lightblue;
}
.border1 {
border: 5px solid black;
}
.dark_blue {
border: 5px solid green;
}
.border2 {
background-color: darkblue;
}
div {
width: 400px;
height: 400px;
border: 5px solid lightgreen;
}
button {
margin: 15px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div id="demoDiv" class="light_blue"></div>
<button id="darkblue">Dark Blue</button>
<button id="lightblue">Light Blue</button>
<script>
$(document).ready(function() {
$("#darkblue").click(function() {
$("#demoDiv").removeClass("light_blue border1")
$("#demoDiv").addClass("dark_blue border2")
});
$("#lightblue").click(function() {
$("#demoDiv").removeClass("dark_blue border2")
$("#demoDiv").addClass("light_blue border1")
});
});
</script>
</body>
</html>
Como podemos ver, ponemos varios nombres de clases en los métodos removeClass y addClass, asegurándonos de que los nombres estén en una cadena dividida por espacios.
El código anterior cambiará el color de fondo y el borde del div reemplazando dos clases diferentes. Ver la salida:
Use attr() para reemplazar una clase en jQuery
El método attr en jQuery se usa para acceder y cambiar cualquier atributo de un elemento HTML; toma dos parámetros, uno es el atributo y el segundo es el nombre del atributo o las propiedades con las que se reemplazará el atributo.
Esto reemplazará todas las clases del elemento dado con una nueva clase; la sintaxis para este método se encuentra a continuación.
$(selector).attr('class', 'newClassName');
Arriba, la clase es el atributo, y newClassName será el nombre de la clase con el que se reemplazarán las clases anteriores. Probemos un ejemplo.
<html lang="en">
<head>
<meta charset="utf-8">
<title> Attr in jQuery. </title>
<style>
.light_blue {
background-color: lightblue;
}
.dark_blue {
background-color: darkblue;
}
.border {
border: 5px solid green;
}
div {
width: 400px;
height: 400px;
border: 5px solid lightgreen;
}
button {
margin: 15px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div id="demoDiv" class="light_blue border"></div>
<button id="darkblue">Dark Blue</button>
<button id="lightblue">Light Blue</button>
<script>
$(document).ready(function() {
$("#darkblue").click(function() {
$("#demoDiv").attr("class", "dark_blue");
});
$("#lightblue").click(function() {
$("#demoDiv").attr("class", "light_blue");
});
});
</script>
</body>
</html>
El código anterior usa el método attr para reemplazar todas las clases con una nueva clase para un elemento HTML. Ver la salida:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook