[解決済み] jQueryのクラスを別のものに置き換える

質問

このjQueryを持っていて、その中のスタイルを変えているのですが、正しいやり方は、別のスタイルを作り、クラスをjQueryで置き換えるだけだと聞きました。正しい方法を教えてください。

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

そのため .css() 別のクラスを作成して、それをjQueryに置き換えるだけです。

どのように解決するのですか？

jQueryを使って効率的に行うには、以下のように連鎖させればよい。

$('.theClassThatsThereNow').addClass('newClassWithYourStyles').removeClass('theClassThatsTherenow');

単純化するために、次のように段階的に行うこともできます。（jquery オブジェクトを var に代入する必要はありませんが、新しいクラスを追加する前に誤って対象となるクラスを削除してしまい、jquery セレクタを介して dom ノードに直接アクセスしてしまった場合に備えて、安全な方法であることに注意してください。 $('.theClassThatsThereNow') ):

var el = $('.theClassThatsThereNow');
el.addClass('newClassWithYourStyles');
el.removeClass('theClassThatsThereNow');

また、（jsタグがあるので）バニラjsでやりたかった場合。

モダンブラウザの場合( どのブラウザをモダンと呼んでいるかは、こちらをご覧ください。 )

(1つの要素にクラス theClassThatsThereNow )

var el = document.querySelector('.theClassThatsThereNow');
el.classList.remove('theClassThatsThereNow');
el.classList.add('newClassWithYourStyleRules');

または古いブラウザ。

var el = document.getElementsByClassName('theClassThatsThereNow');
el.className = el.className.replace(/\s*theClassThatsThereNow\s*/, ' newClassWithYourStyleRules ');