jQuery remplace une classe par une autre

Question

J'ai ce jQuery et je change de style, mais j'ai entendu dire que la bonne façon de le faire est de créer un style séparé et de simplement remplacer les classes par jQuery. Pouvez-vous m'expliquer comment faire correctement :

 $('.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');
}); 

Ainsi, au lieu d'utiliser .css() tout le temps, je peux créer une autre classe et la remplacer simplement par jQuery.

Answer 1

Vous pouvez utiliser ce simple plugin :

 (function ($) {
    $.fn.replaceClass = function (pFromClass, pToClass) {
        return this.removeClass(pFromClass).addClass(pToClass);
    };
}(jQuery));

Usage:

 $('.divFoo').replaceClass('colored','blackAndWhite');

Avant:

 <div class="divFoo colored"></div>

Après:

 <div class="divFoo blackAndWhite"></div>

Remarque : vous pouvez utiliser différentes classes séparées par des espaces.

Answer 2

En commençant par le fragment HTML :

 <div class='helpTop ...

utilisez le fragment javaScript :

 $(...).toggleClass('helpTop').toggleClass('helpBottom');

Answer 3

Parfois, lorsque vous avez plusieurs classes et que vous devez vraiment toutes les écraser , il est plus simple d'utiliser le .attr() de jQuery pour écraser l'attribut class

 $('#myElement').attr('class', 'new-class1 new-class2 new-class3');

Answer 4

Dans jquery pour remplacer une classe par une autre, vous pouvez utiliser l'option jqueryUI SwitchClass

  $("#YourID").switchClass("old-class-here", "new-class-here");