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.
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.
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.
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.
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.
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.
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With