Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

difference between toggleclass and addclass

I am working with jquery and attempting to add a class to a table on the selection of that table row.

I was initially using the following code -

$(this).parents("tr").toggleClass("over", this.clicked);            

For some reason, that wasn't working in only some instances where there was already a class assigned. Before I went too crazy with any troubleshooting, I changed it to the following -

$(this).parents("tr").addClass("over", this.clicked);           

This new option appears to be working fine.

My question is whether one option above is better than the other.....Should I be using toggleClass instead of addClass, or is addClass sufficient?

thanks for any thoughts.

like image 435
czuroski Avatar asked Dec 01 '11 13:12

czuroski


People also ask

What is the use of toggleclass in jQuery?

toggleClass method checks for toggles one or more classes from the element. If the class already exists, toggleClass removes it and if the class not exists, toggleClass will add the class. toggleClass is useful when you want to toggle between show and hide any element. This way, you can manipulate class from the element using JQuery.

What is the difference between addClass and removeclass methods?

The addClass method add one or more class to the specific element. removeClass method removes one or multiple class from the element matched from the parameter. If no parameter specified, all class from the element will be removed. toggleClass method checks for toggles one or more classes from the element.

How to toggle between adding and removing the main class name?

Toggle between adding and removing the "main" class name for all <p> elements: The toggleClass () method toggles between adding and removing one or more class names from the selected elements.

How to only add or remove one class from a list?

However, by using the "switch" parameter, you can specify to only remove, or only add a class name. Required. Specifies one or more class names to add or remove. To specify several classes, separate the class names with a space Optional. Specifies a function that returns one or more class names to add/remove Optional.


2 Answers

addClass does just that, adds the class to the element.

toggleClass on the other hand does THAT, toggles the class, removing it if it's there, otherwise adding it, but optionally taking a boolean value (true/false) to determine if the object should be added (true) or removed (false).

toggleClass probably wasn't working for you in the instances where this.clicked was false, which is expected behavior. The argument you're passing in addClass has no effect, since it ALWAYS adds the class.

Conclusion:

Use toggleClass for toggling classes, use addClass for adding classes.

like image 192
Andreas Eriksson Avatar answered Oct 28 '22 02:10

Andreas Eriksson


If addClass is working for you, then you should stick with it. The methods are meant for different purposes. addClass ensures that a particular class is present on an element, while toggleClass adds the class if it isn't there and removes it if it is.

Check out the API reference for the full explanation of each method:

  • http://api.jquery.com/toggleClass/
  • http://api.jquery.com/addClass/
like image 35
FishBasketGordo Avatar answered Oct 28 '22 02:10

FishBasketGordo