Detailed explanation of jQuery.toggleClass() function

Content directory

The toggleClass() function toggles the css class name specified on each element matched by the current jQuery object.

The so-called "switch" means that if the specified class name already exists on the element, it will be removed; if not, it will be added.

This method checks the class specified in each element. If it does not exist, add the class, if it has been set, delete it. This is the so-called switching effect.

By using the "switch" parameter, you can specify that only classes are deleted or added.

This function belongs to the jQuery object (instance).

grammar

The usage of toggleClass() function is relatively complex. It has the following two main usages:

Usage 1:

// Parameter type (string) is the use of v 1.0
// Parameter type (string, boolean) is a new use of v 1.3
// Parameter type (function [, boolean]) is the new usage of v 1.4
jQueryObject.toggleClass( classNames [, switch ] )

Toggles the specified css class name classNames. If the specified class name exists, the class name is removed; if it exists, the class name is added.

The switch parameter specifies whether to add or remove only the specified css class name.

Usage 2: jQuery 1.4 adds this usage.

jQueryObject.toggleClass( [ switch ] )

As long as the element has a css class name or the switch parameter is false, toggleclass () will remove all css class names of the element. Otherwise (in any other case), the class attribute of the element is reset to the valid class attribute value (valid means not empty) when the toggleClass() function was last called (it must be that usage). If there is no valid class attribute value, reset the class attribute to an empty string.

Note: toggleClass() will "toggle" the css class name specified on each element that the current jQuery object matches.

parameter

parameter describe
classNames The css class name specified by String/Function type. Strings can be separated by spaces to add multiple css class names. Or a function that returns the name of the css class.
switch Boolean type a Boolean value that specifies whether to add or remove css class names. true means add, false means remove.

 

New support for jQuery 1.4: the parameter className can be a function. toggleClass() will execute the function based on the traversal of all matched elements, and this in the function will point to the corresponding DOM element.

toggleClass() also passes three parameters to the function: the first parameter is the index of the element in the matching element, the second parameter is the current class attribute value of the element node, and the third parameter is the switch parameter passed in when toggleClass() is called.

The return value of the function is the name of the css class that the element needs to switch (multiple css class names can also be represented by space separation). If the return value is a blank string or undefined, toggleClass() will not switch any css class names for the current element.

Return value

The return value of the toggleClass() function is jQuery type, which returns the current jQuery object itself.

Example

Here are some equivalent codes for toggleClass() function application. You can refer to and understand them.

$element.toggleClass( className );
// Amount to
if( $element.hasClass( className ) ){
	$element.removeClass( className );
}else{
	$element.addClass( className );	
}
//The above classnames represent a single css class name. If there are multiple css class names separated by spaces, the code of the equivalent part needs to be executed circularly

/* ********** Dividing line********** */

$element.toggleClass( className, true );
//Amount to
$element.addClass( className );	

/* ********** Dividing line********** */

$element.toggleClass( className, false );
//Amount to
$element.removeClass( className );

Take the following HTML code as an example:

<div id="n1">
   <p id="n2" class="demo test">CodePlayer</p>
   <p id="n3" class="foo">Focus on programming technology sharing</p>
</div>

We write the following jQuery Code:

// "Current" in the following notes means before the function is executed

var $n2 = $("#n2");
// Switch the name of a css class on n2 (currently there is "demo" and there is no "demo" after switching)
$n2.toggleClass("demo");
document.writeln( $n2.attr("class") ); // test

//Switch the two css class names on n2 (currently there is no "demo" with "test", after switching, there is "demo" without "test")
$n2.toggleClass("demo test");
document.writeln( $n2.attr("class") ); // demo

var $n3 = $("#n3");
// Add 2 css class names for n3 (class name "foo" already exists and will not be added repeatedly)
// Equivalent to $n3.addClass("foo bar");
$n3.toggleClass("foo bar", true);
document.writeln( $n3.attr("class") ); // foo bar

// Remove all css class names (the current class attribute value is "foo bar", there are css class names, which will be archived first and then removed internally)
$n3.toggleClass(false);
document.writeln( $n3.attr("class") ); // (empty string)

// Restore to the last saved class attribute value (the current class attribute value is' ', no css class name, internal will not be saved)
// At this time, the switch is not false, and the element does not have a css class name, so it will revert to the previously saved class attribute value ("foo bar")
$n3.toggleClass(true);
document.writeln( $n3.attr("class") ); // foo bar

// Remove a css class name from n3
// Equivalent to $n3.removeClass("bar");
$n3.toggleClass("bar", false);
document.writeln( $n3.attr("class") ); // foo

// Remove all css class names (the current class attribute value is "foo", there are css class names, which will be archived first and then removed internally)
// Since there is currently a css class name, all css class names will be removed regardless of whether the parameter is true or false 
$n3.toggleClass(true);
document.writeln( $n3.attr("class") ); // (empty string)

// Restore to the last saved class attribute value (the current class attribute value is' ', without css class name, it will not be saved internally)
//At this time, the switch is not false, and the element does not have a css class name, so it will revert to the previously saved class attribute value ("foo")
$n3.toggleClass(true);
document.writeln( $n3.attr("class") ); // foo

// There are currently css class names. Remove all css class names (the current class attribute value is "foo", there are css class names, which will be archived first and then removed internally)
// Equivalent to $n3.toggleClass(true);
$n3.toggleClass();
document.writeln( $n3.attr("class") ); // (empty string)

// There is no css class name at present, and it will be restored to the last saved class attribute value (the current class attribute value is' ', without css class name, it will not be saved internally)
//At this time, the switch is not false, and the element does not have a css class name, so it will revert to the previously saved class attribute value ("foo")
$n3.toggleClass();
document.writeln( $n3.attr("class") ); // foo

// Switch and force add operation for print index and printed class names
// Remove only for print index (index indicates the index of the current element in the matching element)
function callback(index, classNames, _switch){
	// this within the function points to the current DOM element of the iteration
	if( _switch === false){
		return "print-" + index;
	}else{ // true or undefined
		return "print-" + index + " printed";
	}	
}

// Here, true is the value of the third parameter ﹐ switch ﹐ passed to the function callback
$("p").toggleClass( callback, true);

https://blog.csdn.net/weixin_37580235/article/details/80735126

Tags: Front-end Attribute JQuery Programming

Posted on Thu, 07 Nov 2019 05:53:30 -0500 by Hamish