jQuery-Ersetzungsklasse
-
Verwenden Sie
removeClass()undaddClass(), um eine Klasse in jQuery zu ersetzen -
Verwenden Sie
attr(), um eine Klasse in jQuery zu ersetzen
Dieses Tutorial zeigt, wie Sie eine Klasse in jQuery ersetzen.
jQuery bietet keine integrierte Methode zum Ersetzen der Klassen von HTML-Elementen, aber einige andere Methoden, die verwendet werden können, um die Klassenersetzungsfunktionalität zu erreichen. Dieses Tutorial zeigt verschiedene Methoden zum Ersetzen einer Klasse durch eine andere Klasse mithilfe von jQuery.
Verwenden Sie removeClass() und addClass(), um eine Klasse in jQuery zu ersetzen
Mit der Funktion removeClass() wird eine Klasse aus dem Element in jQuery entfernt und mit der Methode addClass() wird dem HTML-Element eine Klasse hinzugefügt. Diese Klassen können zusammen implementiert werden, um eine replaceClass-Methode zu erstellen.
Syntax für die Methode removeClass():
$(Selector).removeClass(Class);
Syntax für die Methode addClass():
$(Selector).addClass(Class);
Oben ist Klasse der Klassenname, der entfernt oder hinzugefügt wird. Mit beiden Methoden können wir eine Funktion replaceClass erstellen; Versuchen wir es an einem Beispiel.
<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>
Der obige Code erstellt die Funktion replaceClass, die die Methoden removeClass und addClass verwendet, um eine Klasse eines HTML-Elements zu ersetzen.
Die Funktion replaceClass() benötigt drei Parameter, erstens die ID des Elements, zweitens die zu ersetzende Klasse und drittens die Klasse, die die angegebene Klasse ersetzen wird. Siehe die Ausgabe:
Wenn wir mehrere Klassen ersetzen möchten, können wir in ähnlicher Weise Leerzeichen in die Methoden removeClass und addClass einfügen und dann die Namen anderer Klassen einfügen. Sehen wir uns ein Beispiel an.
<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>
Wie wir sehen können, fügen wir mehrere Klassennamen in die Methoden removeClass und addClass ein und stellen sicher, dass die Namen in einer durch Leerzeichen getrennten Zeichenfolge stehen.
Der obige Code ändert die Hintergrundfarbe und den Rand des div, indem er zwei verschiedene Klassen ersetzt. Siehe die Ausgabe:
Verwenden Sie attr(), um eine Klasse in jQuery zu ersetzen
Die Methode attr in jQuery wird verwendet, um auf jedes Attribut eines HTML-Elements zuzugreifen und es zu ändern; Es werden zwei Parameter benötigt, einer ist das Attribut und der zweite der Attributname oder die Eigenschaften, durch die das Attribut ersetzt wird.
Dadurch werden alle Klassen des angegebenen Elements durch eine neue Klasse ersetzt; Die Syntax für diese Methode ist unten.
$(selector).attr('class', 'newClassName');
Oben ist class das Attribut und newClassName der Klassenname, durch den vorherige Klassen ersetzt werden. Versuchen wir es an einem Beispiel.
<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>
Der obige Code verwendet die Methode attr, um alle Klassen durch eine neue Klasse für ein HTML-Element zu ersetzen. Siehe die Ausgabe:
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