How can I change the class of an element with jQuery

Question

I have a JavaScript function that looks like this  function UpdateFilterView       if   extraFilterExists        if      F ShowF   val      1              extraFilterDropDownButton   attr  class    quot showhideExtra up quot              extraFilterDropDownButton   css  quot display quot    quot block quot          if      divCategoryFilter   css  quot display quot       none                 divCategoryFilter   show  slow                  return        else         if      divCategoryFilter   css  quot display quot       block                 divCategoryFilter   hide  slow                       extraFilterDropDownButton   css  quot display quot    quot block quot              extraFilterDropDownButton   attr  class    quot showhideExtra down quot          return            else       if      divCategoryFilter   css  quot display quot       none               divCategoryFilter   hide  fast                  extraFilterDropDownButton   css  quot display quot    quot none quot           This will be triggered by the following code  from within the   document  ready function             extraFilterDropDownButton   click function         if      F ShowF   val      1                F ShowF   val 0         else               F ShowF   val 1              UpdateFilterView         The HTML for this is easy   lt div id  quot divCategoryFilter quot  gt     lt  div gt    lt div style  quot clear both  quot  gt  lt  div gt   lt div id  quot extraFilterDropDownButton quot  class  quot showhideExtra down quot  gt  amp nbsp  lt  div gt   I have two problems with this   When the panel is hidden and we press the div button  extraFilterDropDownButton  the upper left part of the page will flicker and then the panel will be animated down   When the panel is shown and we press the div button the panel will hide  slow    but the button will not change to the correct class even when we set it in the UpdateFilterView script    The correct class will be set on the button when hovering it  this is set with the following code     quot  extraFilterDropDownButton quot   hover function         if      divCategoryFilter   css  quot display quot       block             this  attr  class    showhideExtra up hover          else           this  attr  class    showhideExtra down hover                 function         if      divCategoryFilter   css  quot display quot       block             this  attr  class    showhideExtra up          else           this  attr  class    showhideExtra down

User · Answer

To set a class completely  instead of adding one or removing one  use this     this  attr  class   newclass      Advantage of this is that you ll remove any class that might be set in there and reset it to how you like  At least this worked for me in one situation

User · Answer

lt script gt    document  ready function             button   attr  class   btn btn-primary         lt  script gt

User · Answer

Use jQuery s     this  addClass  showhideExtra up hover      and    this  addClass  showhideExtra down hover

User · Answer

I like to write a small plugin to make things cleaner     fn setClass   function classes        this attr  class   classes       return this       That way you can simply do     button   setClass  btn btn-primary

[javascript] How can I change the class of an element with jQuery>

Examples related to javascript

Examples related to html

Examples related to jquery