Please explain 'switch' in the .toggleClass() API?

Question

Here is the API for the .toggleClass() method of the Jquery library. I am unsure about how to implement the switch portion. Is the switch portion supposed to result in boolean value, and if it is, then it is either implemented or not?

So if the code was :

`$('selector').toggleClass('class-to-be-toggled' , ($(this).hasClass('white')))`

and the ($(this).hasClass('white')) evaluated to true, then the .toggleClass() would execute, and if it evaluate to false, then the .toggleClass() would not execute?

Or am i misunderstanding the purpose of switch.

jfriend00 · Answer 1 · 2012-07-24T07:12:40.020

3

The switch boolean determines whether the class is added or removed. If the switch argument is true, the class will be added, if it is false the class will be removed.

Straight from the jQuery doc:

.toggleClass( className, switch )  

className - One or more class names (separated by spaces) 
    to be toggled for each element in the matched set. 
switch - A Boolean (not just truthy/falsy) value to determine 
    whether the class should be added or removed.

There's even a code example on the jQuery doc page that shows the use of the switch argument.

If the switch boolean is not passed at all, then the class will be added if not already present and removed if it is present (thus it will be toggled).

edited Jul 24 '12 at 07:12

answered Jul 24 '12 at 06:20

jfriend00

580,699
78
809
825

so what happens if the switch statement evaluates to true? to false? – chris Frisina Jul 24 '12 at 06:21
@chrisFrisina - I'm having a hard time knowing what you don't understand. I've already said in multiple places that if the switch argument is true, the class is added, if it is false the class is removed. – jfriend00 Jul 24 '12 at 06:23
2

But what if it's true? (Just kidding. +1) – nnnnnn Jul 24 '12 at 06:56

score 3 · Accepted Answer · answered Jul 24 '12 at 06:24

3

If you omit the parameter, the class will be added or removed depending on whatever it currently isn't. If you pass the parameter, the class will be added or removed depending on the parameter, regardless of the current state of the element.

For instance, this:

$(':checkbox').click(function() {
    $(this).parent().toggleClass('selected', $(this).is(':checked'));
});

is pretty much just a shorthand of writing:

$(':checkbox').click(function() {
    if($(this).is(':checked')) {
        $(this).parent().addClass('selected');
    } else {
        $(this).parent().removeClass('selected');
    }
});

You might object that most of the time you'd get away well with just

$(':checkbox').click(function() {
    $(this).parent().toggleClass('selected');
});

which may well be the case, but if anything else than the checking of a checkbox may interfere with the selected class, then your toggling would be at risk of going out of sync, if you don't pass a parameter specifying exactly what you want it to do.

answered Jul 24 '12 at 06:24

David Hedlund

121,697
28
196
213

As long as we're talking about shorthand ways to write things, why not `this.checked` instead of `$(this).is(":checked")`? (More efficient at runtime and easier to type and read.) – nnnnnn Jul 24 '12 at 06:54
1

@nnnnnn: We've discussed this before. My opinion stands, as does yours, I would suppose. I usually don't mind the jQuery round-trip. `this.cssFloat` works in some browsers and not in others (IE uses/used `styleFloat`), `$(this).css('float')` works in all. To me, the single greatest benefit of jQuery is not having to deal with different browser implementations. The fact that the particular property `checked` doesn't happen to have any such inconsistencies in behavior across the major browsers is not a very compelling reason to make an exception to this practice, in my opinion. – David Hedlund Jul 24 '12 at 07:33
Ah, yes, I remember you pointing that out previously (I just didn't remember it was you, sorry). I use `.css()` to set CSS properties, but for things like `.checked`, `.disabled`, etc., I generally use `this.checked`, `this.disabled`. That is, there are some properties that I _know_ will work with one-hundred percent confidence without needing jQuery; I've been using said properties for so long (pre-jQuery) that I don't even have to think about them. – nnnnnn Jul 24 '12 at 07:49
@nnnnnn: yeah, I've grown up using `this.checked` and the likes as well, but I've come to prefer using jQuery consistently, which also allows me to set attributes by their actual name `"class"` rather than some hack `.className`, just because `class` happens to be a JavaScript keyword. A matter of taste, I suppose. – David Hedlund Jul 24 '12 at 07:58

score 1 · Answer 3 · answered Jun 01 '19 at 20:05

The second parameter to .toggleClass() is a tristate parameter.

$x.toggleClass('c', true) to add class c
$x.toggleClass('c', false) to remove class c
$x.toggleClass('c') to invert whether c is there (add if it was, remove if it wasn't)

$x.toggleClass('class', undefined) also inverts

That fourth alternative is not documented in .toggleClass() but it's guaranteed to work because that's how optional function parameters work.

The distinction in jQuery source code appears to be typeof switch == 'boolean'. That treats Boolean(0) like false by the way, so that would also remove the class. Besides omitting the switch parameter, it seems you could pass null or 42 to get some inverting toggly action. But of course you shouldn't code on undocumented features. I'd suggest passing undefined if you want to explicitly toggle.

score 0 · Answer 4 · answered Jul 24 '12 at 06:23

0

if the your second parameter(switch) is true, the class is added if false it is removed

answered Jul 24 '12 at 06:23

Leon

958
6
18

Please explain 'switch' in the .toggleClass() API?

4 Answers4