jQuery-Sichtbarkeit umschalten
- jQuery-Sichtbarkeit umschalten
-
Verwenden Sie die Methoden
show()undhide(), um die Sichtbarkeit eines Elements in jQuery umzuschalten -
Verwenden Sie die Methode
css(), um die Sichtbarkeit eines Elements in jQuery umzuschalten
Dieses Tutorial zeigt, wie Sie die Sichtbarkeit eines Elements mit jQuery umschalten.
jQuery-Sichtbarkeit umschalten
Wir können die Sichtbarkeit eines HTML-Elements mit der jQuery-Methode toggle() umschalten. Dies implementiert sowohl die Methoden show() als auch hide(), um die Toggle-Funktionalität zu implementieren.
Die Syntax für diese Methode lautet:
toggle( speed, [callback])
Wie wir sehen können, benötigt die Methode zwei Parameter. Beide sind optional, wobei Geschwindigkeit die Geschwindigkeit der Toggle-Animation mit drei Zeichenfolgenwerten langsam, normal oder schnell oder ein beliebiger ganzzahliger Wert in Millisekunden ist und Rückruf die Funktion ist, die dies kann aufgerufen werden, sobald die Animation abgeschlossen ist.
Versuchen wir ein einfaches Beispiel mit beiden optionalen Parametern:
<!doctype html>
<html lang="en">
<head>
<title>jQuery toggle() method</title>
<script src = "https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function(){
$("#toggleDiv").toggle( 'slow', function(){
$("#Info").text('The visibility toggle is performed');
});
});
});
</script>
<style>
#toggleDiv {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
</head>
<body>
<button id = "toggle"> Toggle the Element </button>
<div id = "toggleDiv">
<h1>Delftstack</h1>
</div>
<div id = "Info"></div>
</body>
</html>
Der obige Code schaltet das angegebene div-Element bei jedem Klick auf die Schaltfläche um und zeigt die Informationen an, sobald die Umschaltung abgeschlossen ist.
Siehe die Ausgabe:
Verwenden Sie die Methoden show() und hide(), um die Sichtbarkeit eines Elements in jQuery umzuschalten
jQuery stellt auch die Methoden show() und hide() zur Verfügung, um einzelne Operationen auszuführen. Wir können diese Methoden auch zusammen implementieren, um ein Element in jQuery umzuschalten.
Die Syntax für diese Methoden lautet:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed und callback sind die gleichen Parameter wie die toggle()-Methode. Versuchen wir ein einfaches Umschaltbeispiel mit diesen Methoden:
<!doctype html>
<html lang="en">
<head>
<title>jQuery toggle with Show Hide methods</title>
<script src = "https://code.jquery.com/jquery-3.6.0.js"></script>
<style>
#Demobox1 {
background: lightgreen;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
#Demobox2 {
background: lightblue;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
#Demobox3{
background: pink;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
</style>
</head>
<body>
<div id="div1">
<div id="Demobox1"><h1>1</h1></div>
<div id="Demobox2"><h1>2</h1></div>
<div id="Demobox3"><h1>3</h1></div>
<button id="Click1">Toggle Box 1 visibility</b>
<button id="Click2">Toggle Box 2 visibility</b>
<button id="Click3">Toggle Box 3 visibility</b>
</div>
<script>
$("#Click1").click(function(){
if ( $("#Demobox1:visible").length ){
$("#Demobox1").hide("slow");
} else {
$("#Demobox1").show("slow");
}
});
$("#Click2").click(function(){
if ( $("#Demobox2:visible").length ){
$("#Demobox2").hide("slow");
} else {
$("#Demobox2").show("slow");
}
});
$("#Click3").click(function(){
if ( $("#Demobox3:visible").length ){
$("#Demobox3").hide("slow");
} else {
$("#Demobox3").show("slow");
}
});
</script>
</body>
</html>
Der obige Code funktioniert ähnlich wie die Methode toggle(). Siehe die Ausgabe:
Verwenden Sie die Methode css(), um die Sichtbarkeit eines Elements in jQuery umzuschalten
Wir können auch die jQuery-Methode css() verwenden, um die Sichtbarkeit eines Elements umzuschalten. Um dies durchzuführen, müssen wir Bedingungen schaffen, damit, wenn die Sichtbarkeit des div ausgeblendet ist, es auf sichtbar gesetzt wird und umgekehrt.
Die Syntax für die Methode css() lautet:
$("#Demobox1").css("visibility","hidden");
$("#Demobox1").css("visibility","visible");
Wenn die Sichtbarkeit ausgeblendet ist, setzen Sie sie auf sichtbar. Andernfalls, wenn es sichtbar ist, setzen Sie es auf ausgeblendet.
Versuchen wir es an einem Beispiel:
<!doctype html>
<html lang="en">
<head>
<title>jQuery toggle with Css method</title>
<script src = "https://code.jquery.com/jquery-3.6.0.js"></script>
<style>
#Demobox1 {
background: lightgreen;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
#Demobox2 {
background: lightblue;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
#Demobox3{
background: pink;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
</style>
</head>
<body>
<div id="div1">
<div id="Demobox1"><h1>1</h1></div>
<div id="Demobox2"><h1>2</h1></div>
<div id="Demobox3"><h1>3</h1></div>
<button id="Click1">Toggle Box 1 visibility</b>
<button id="Click2">Toggle Box 2 visibility</b>
<button id="Click3">Toggle Box 3 visibility</b>
</div>
<script>
$("#Click1").click(function(){
if ( $("#Demobox1").css("visibility") == "visible" ){
$("#Demobox1").css("visibility","hidden");
} else {
$("#Demobox1").css("visibility","visible");
}
});
$("#Click2").click(function(){
if ( $("#Demobox2").css("visibility") == "visible" ){
$("#Demobox2").css("visibility","hidden");
} else {
$("#Demobox2").css("visibility","visible");
}
});
$("#Click3").click(function(){
if ( $("#Demobox3").css("visibility") == "visible" ){
$("#Demobox3").css("visibility","hidden");
} else {
$("#Demobox3").css("visibility","visible");
}
});
</script>
</body>
</html>
Der obige Code enthält drei verschiedene divs, für die die Sichtbarkeit über die verschiedenen Schaltflächen umgeschaltet werden kann, indem die CSS-Sichtbarkeitseigenschaft gesetzt wird.
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