Attributes: Drop the toggleClass(boolean|undefined) signature

The behavior of this signature is not intuitive, especially if classes are
manipulated via other ways between `toggleClass` calls.

Fixes gh-3388
Closes gh-4766
This commit is contained in:
Michał Gołębiowski-Owczarek 2020-09-01 10:42:03 +02:00 committed by GitHub
parent 68b4ec59c8
commit a4421101fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 62 deletions

View File

@ -1,7 +1,6 @@
import jQuery from "../core.js"; import jQuery from "../core.js";
import stripAndCollapse from "../core/stripAndCollapse.js"; import stripAndCollapse from "../core/stripAndCollapse.js";
import rnothtmlwhite from "../var/rnothtmlwhite.js"; import rnothtmlwhite from "../var/rnothtmlwhite.js";
import dataPriv from "../data/var/dataPriv.js";
import "../core/init.js"; import "../core/init.js";
@ -103,13 +102,6 @@ jQuery.fn.extend( {
}, },
toggleClass: function( value, stateVal ) { toggleClass: function( value, stateVal ) {
var type = typeof value,
isValidValue = type === "string" || Array.isArray( value );
if ( typeof stateVal === "boolean" && isValidValue ) {
return stateVal ? this.addClass( value ) : this.removeClass( value );
}
if ( typeof value === "function" ) { if ( typeof value === "function" ) {
return this.each( function( i ) { return this.each( function( i ) {
jQuery( this ).toggleClass( jQuery( this ).toggleClass(
@ -119,45 +111,25 @@ jQuery.fn.extend( {
} ); } );
} }
if ( typeof stateVal === "boolean" ) {
return stateVal ? this.addClass( value ) : this.removeClass( value );
}
return this.each( function() { return this.each( function() {
var className, i, self, classNames; var className, i, self, classNames;
if ( isValidValue ) { // Toggle individual class names
i = 0;
self = jQuery( this );
classNames = classesToArray( value );
// Toggle individual class names while ( ( className = classNames[ i++ ] ) ) {
i = 0;
self = jQuery( this );
classNames = classesToArray( value );
while ( ( className = classNames[ i++ ] ) ) { // Check each className given, space separated list
if ( self.hasClass( className ) ) {
// Check each className given, space separated list self.removeClass( className );
if ( self.hasClass( className ) ) { } else {
self.removeClass( className ); self.addClass( className );
} else {
self.addClass( className );
}
}
// Toggle whole class name
} else if ( value === undefined || type === "boolean" ) {
className = getClass( this );
if ( className ) {
// Store className if set
dataPriv.set( this, "__className__", className );
}
// If the element has a class name or if we're passed `false`,
// then remove the whole classname (if there was one, the above saved it).
// Otherwise bring back whatever was previously saved (if anything),
// falling back to the empty string if nothing was stored.
if ( this.setAttribute ) {
this.setAttribute( "class",
className || value === false ?
"" :
dataPriv.get( this, "__className__" ) || ""
);
} }
} }
} ); } );

View File

@ -1415,7 +1415,7 @@ QUnit.test( "removeClass(undefined) is a no-op", function( assert ) {
} ); } );
var testToggleClass = function( valueObj, assert ) { var testToggleClass = function( valueObj, assert ) {
assert.expect( 19 ); assert.expect( 11 );
var e = jQuery( "#firstp" ); var e = jQuery( "#firstp" );
assert.ok( !e.is( ".test" ), "Assert class not present" ); assert.ok( !e.is( ".test" ), "Assert class not present" );
@ -1443,25 +1443,6 @@ var testToggleClass = function( valueObj, assert ) {
assert.ok( ( e.is( ".testA.testC" ) && !e.is( ".testB" ) ), "Assert 1 class added, 1 class removed, and 1 class kept" ); assert.ok( ( e.is( ".testA.testC" ) && !e.is( ".testB" ) ), "Assert 1 class added, 1 class removed, and 1 class kept" );
e.toggleClass( valueObj( "testA testC" ) ); e.toggleClass( valueObj( "testA testC" ) );
assert.ok( ( !e.is( ".testA" ) && !e.is( ".testB" ) && !e.is( ".testC" ) ), "Assert no class present" ); assert.ok( ( !e.is( ".testA" ) && !e.is( ".testB" ) && !e.is( ".testC" ) ), "Assert no class present" );
// toggleClass storage
e.toggleClass( true );
assert.ok( e[ 0 ].className === "", "Assert class is empty (data was empty)" );
e.addClass( "testD testE" );
assert.ok( e.is( ".testD.testE" ), "Assert class present" );
e.toggleClass();
assert.ok( !e.is( ".testD.testE" ), "Assert class not present" );
assert.ok( jQuery._data( e[ 0 ], "__className__" ) === "testD testE", "Assert data was stored" );
e.toggleClass();
assert.ok( e.is( ".testD.testE" ), "Assert class present (restored from data)" );
e.toggleClass( false );
assert.ok( !e.is( ".testD.testE" ), "Assert class not present" );
e.toggleClass( true );
assert.ok( e.is( ".testD.testE" ), "Assert class present (restored from data)" );
e.toggleClass();
e.toggleClass( false );
e.toggleClass();
assert.ok( e.is( ".testD.testE" ), "Assert class present (restored from data)" );
}; };
QUnit.test( "toggleClass(String|boolean|undefined[, boolean])", function( assert ) { QUnit.test( "toggleClass(String|boolean|undefined[, boolean])", function( assert ) {