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，但是这样做会更安全，以防万一您在添加新类并直接访问之前意外删除了要定位的类dom节点通过其jquery选择器，例如$('.theClassThatsThereNow')）：

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

另外（因为有一个js标记），如果您想在普通js中这样做：

对于现代浏览器（请参阅此以查看我将哪些浏览器称为现代）

（假设一个元素带有class 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 ');

您可以使用以下简单插件：

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

用法：

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

之前：

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

后：

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

注意：您可以使用各种以空格分隔的类。

从HTML片段开始：

<div class='helpTop ...

使用javaScript片段：

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

在jquery中将一个类替换为另一个类，可以使用jqueryUI SwitchClass选项

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

有时，当您有多个类并且确实需要覆盖所有类时，最简单的方法是使用jQuery的.attr（）覆盖class属性：

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

您可以使用jQuery方法.hasClass()，.addClass()以及.removeClass()操纵哪些类被应用到元素。只需定义不同的类并根据需要添加/删除它们即可。

您需要使用CSS创建一个类-

.greenclass {color:green;}

然后您可以将其添加到元素

$('selector').addClass("greenclass");

并用-将其删除

$('selector').removeClass("greenclass");

您可以使用.removeClass和.addClass。有关更多信息，请访问http://api.jquery.com。

在CSS文件中创建一个类：

.active {
  z-index: 20;
  background: rgb(23,55,94)
  color: #fff;
}

然后在你的jQuery中

$(this).addClass("active");

您可以让他们两个都使用“ corpo_button”类或类似的类，然后在$(".corpo_button").click(...)调用$(this).toggleClass("corpo_buttons_asia corpo_buttons_global");

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);
    });
};

编辑

这是我用一个类替换另一个类的解决方案（jQuery方法）。实际上，其他答案不会将一个班级替换为另一个班级，而是添加一个班级并删除另一个班级在技​​术上根本不同的类。

这是一个例子：

之前的标记：<br class="el search-replace"><br class="el dont-search-replace">
js：jQuery('.el').remove('search-replace').add('replaced')
以后的标记：<br class="el replaced"><br class="el dont-search-replace replaced">

用我的解决方案

js：jQuery('.el').replaceClass('search-replace', 'replaced')
之后的标记：<br class="el replaced"><br class="el dont-search-replace">

想象一下任何语言的字符串替换函数：

搜索：“ search-replace”
替换：“ replaced”
主题：“ dont-search-replace”
结果：“ dont-search-replace”
结果（错误，但实际上其他解决方案产生了什么）：“ dont-search-replace替换”

PS： 如果可以确定不存在要添加的类，而要删除的类则存在，则可以确定最简单的jQuery解决方案是：
jQuery('el').toggleClass('is-present-will-be-removed is-not-present-will-be-added')

PPS我完全知道，如果您的选择器等于该类，则删除其他解决方案就可以了jQuery('.search-replace').removeClass('search-replace').addClass('whatever')。
但是有时您需要处理更多任意集合。