jQuery replace one class with another

Question

I have this jQuery and I m changing styles in it but I ve heard that the correct way to do it is to create a separate style and just replace classes with jQuery  Can you explain me how to do it correctly       corpo buttons asia   click function                        info   css  visibility    hidden            info2   css  visibility    visible          this  css  z-index    20          this  css  background-color    rgb 23 55 94           this  css  color     FFF            corpo buttons global   css  background-color    rgb 197 197 197             corpo buttons global   css  color     383838                       corpo buttons global   click function              info   css  visibility    visible            info2   css  visibility    hidden          this  css  background-color    rgb 23 55 94           this  css  color     FFF            corpo buttons asia   css  z-index    2            corpo buttons asia   css  background-color    rgb 197 197 197             corpo buttons asia   css  color     383838            So instead of using  css   all the time I can create another class and just replace it with jQuery

User · Answer

You d need to create a class with CSS -   greenclass  color green     Then you could add that to elements with      selector   addClass  greenclass      and remove it with -      selector   removeClass  greenclass

User · Answer

You can use jQuery methods  hasClass     addClass    and  removeClass   to manipulate which classes are applied to your elements  Just define different classes and add remove them as necessary

User · Answer

Starting with the HTML fragment    lt div class  helpTop       use the javaScript fragment          toggleClass  helpTop   toggleClass  helpBottom

User · Answer

You can use  removeClass and  addClass  More in http   api jquery com

User · Answer

jQuery fn replaceClass   function sSearch  sReplace        return this each function             var s          this className        replace                    sSearch trim                            sReplace trim                            this className   s substr 1  s length - 2                EDIT  This is my solution to replace one class with another  the jQuery way   Actually the other answers don t replace one class with another but add one class and remove another which technically is not the same at all   Here is an example   Markup before   lt br class  el search-replace  gt  lt br class  el dont-search-replace  gt  js  jQuery   el   remove  search-replace   add  replaced   Markup after   lt br class  el replaced  gt  lt br class  el dont-search-replace replaced  gt     With my solution  js  jQuery   el   replaceClass  search-replace    replaced   Markup after   lt br class  el replaced  gt  lt br class  el dont-search-replace  gt     Imagine a string replace function in whatever language   Search   search-replace  Replace   replaced  Subject   dont-search-replace  Result   dont-search-replace  Result  wrong but actually what the other solutions produce    dont-search-replace replaced     PS If it s for sure that the class to add is not present and the class to remove is present for sure the most simple jQuery solution would be  jQuery  el   toggleClass  is-present-will-be-removed is-not-present-will-be-added    PPS I m totally aware that if your selector equals the class to remove the other solutions would work just fine jQuery   search-replace   removeClass  search-replace   addClass  whatever    But sometimes you work with more arbitrary collections

User · Answer

Sometimes when you have multiple classes and you really need to overwrite all of them  it s easiest to use jQuery s  attr   to overwrite the class attribute       myElement   attr  class    new-class1 new-class2 new-class3

User · Answer

you could have both of them use a  corpo button  class  or something like that  and then in     corpo button   click      just call   this  toggleClass  corpo buttons asia corpo buttons global

User · Answer

Create a class in your CSS file    active     z-index  20    background  rgb 23 55 94    color   fff      Then in your jQuery    this  addClass  active

User · Answer

To do this efficiently using jQuery  you can chain it like so       theClassThatsThereNow   addClass  newClassWithYourStyles   removeClass  theClassThatsTherenow      For simplicities sake  you can also do it step by step like so  note assigning the jquery object to a var isnt necessary  but it feels safer in case you accidentally remove the class you re targeting before adding the new class and are directly accessing the dom node via its jquery selector like     theClassThatsThereNow      var el       theClassThatsThereNow    el addClass  newClassWithYourStyles    el removeClass  theClassThatsThereNow      Also  since there is a js tag   if you wanted to do it in vanilla js   For modern browsers  See this to see which browsers I m calling modern    assuming one element with class theClassThatsThereNow   var el   document querySelector   theClassThatsThereNow    el classList remove  theClassThatsThereNow    el classList add  newClassWithYourStyleRules      Or older browsers   var el   document getElementsByClassName  theClassThatsThereNow    el className   el className replace   s theClassThatsThereNow s      newClassWithYourStyleRules

User · Answer

You may use this simple plugin    function             fn replaceClass   function  pFromClass  pToClass            return this removeClass pFromClass  addClass pToClass            jQuery      Usage        divFoo   replaceClass  colored   blackAndWhite      Before    lt div class  divFoo colored  gt  lt  div gt    After    lt div class  divFoo blackAndWhite  gt  lt  div gt    Note  you may use various space separated classes

User · Answer

In jquery to replace a class with another you can use jqueryUI SwitchClass option       YourID   switchClass  old-class-here    new-class-here

[javascript] jQuery replace one class with another

Examples related to javascript

Examples related to jquery