toggle
英[ˈtɒgl] 美[ˈtɑ:gl]
n. Stick-Taste; Lasso-Taste; Umschalttaste
Klasse英ɑ:s ] 美[klæs]
n.Klasse; Kategorie; klassifizieren... in eine bestimmte Ebene, behandeln... als (oder klassifizieren, kategorisieren... in eine bestimmte Klasse); . Sehr gut, ausgezeichnet, hervorragend
vi Gehören zu... Kategorie (oder Level), werden als eine bestimmte Kategorie (oder Level) aufgeführt
jquery toggleClass()-Methode Syntax
Funktion: toggleClass() schaltet eine oder mehrere Klassen um, die das ausgewählte Element setzen oder entfernen. Diese Methode überprüft die angegebene Klasse in jedem Element. Fügt die Klasse hinzu, wenn sie nicht vorhanden ist, oder entfernt sie, wenn sie festgelegt ist. Dies wird als Toggle-Effekt bezeichnet. Über den Parameter „switch“ können Sie jedoch festlegen, dass nur Klassen entfernt oder nur hinzugefügt werden.
Syntax: $(selector).toggleClass(class,switch)
Parameter:
| Parameter | Beschreibung |
| Klasse | Erforderlich. Gibt das Hinzufügen oder Entfernen angegebener Elemente der Klasse an. Wenn Sie mehrere Klassen angeben müssen, verwenden Sie Leerzeichen, um Klassennamen zu trennen. |
| Schalter | Optional. Boolescher Wert. Gibt an, ob Klassen hinzugefügt oder entfernt werden sollen. |
Funktion zum Wechseln von Klassen verwenden Syntax: $(selector).toggleClass(function(index,class),switch)
Parameter:
| Parameter | Beschreibung |
| Funktion (Index, Klasse) | Erforderlich. Gibt eine Funktion an, die einen oder mehrere Klassennamen zurückgibt, die hinzugefügt oder entfernt werden müssen. |
| Index | Optional. Akzeptiert die Indexposition des Selektors. |
| Klasse | optional. Akzeptiert die aktuelle Klasse des Selektors. |
| Schalter | Optional. Boolescher Wert. Gibt an, ob eine Klasse hinzugefügt (true) oder entfernt (false) werden soll. |
jquery toggleClass()-Methode Beispiel
<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>
</html>Klicken Sie auf die Schaltfläche „Instanz ausführen“, um die Online-Instanz anzuzeigen