Javascript 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节点，如

$（'.theclassthattherenow'）

），则会感觉更安全：

另外（因为有一个js标记），如果您想在vanilla js中使用它：

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

对于现代浏览器（）

（假设一个元素的类

为RENOW

）

或旧浏览器：

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

---

您可以使用

.removeClass

和

.addClass

。有关详细信息，请参见。

您可以使用jQuery方法

.hasClass（）

、

.addClass（）

、和

.removeClass（）

来操作应用于元素的类。只需定义不同的类，并根据需要添加/删除它们。

在CSS文件中创建一个类：

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

然后在jQuery中

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

---

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

.greenclass {color:green;}

然后您可以使用

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

并将其连同—

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

---

你可以让他们两个都使用一个“corpo_按钮”类或类似的类，然后在

$（“.corpo_按钮”）。单击（…）

只需调用

$（此）。切换类（“corpo_按钮\亚洲corpo_按钮\全球”）
您可以使用以下简单插件：

(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>



注意：您可以使用各种空格分隔的类。
在jquery中，要用另一个类替换一个类，您可以使用jqueryUI SwitchClass选项

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

编辑
这是我用另一个类替换一个类的解决方案（jQuery方式）。实际上，其他答案并不是用另一个类替换一个类，而是添加一个类，删除另一个类，这在技术上是完全不同的

以下是一个例子：

之前的标记：




js:
jQuery（'.el'）。删除（'search-replace'）。添加（'replaced'）


标记后：




使用我的解决方案

js:
jQuery（'.el'）.replaceClass（'search-replace'，'replaced'）


之后的标记：




想象一个字符串替换函数，使用任何语言：

搜索：“搜索替换”

替换：“已替换”

主题：“不搜索替换”

结果：“不搜索替换”

结果（错误但实际上是其他解决方案产生的结果）：“不要搜索替换”


PS
如果确定要添加的类不存在，而要删除的类确实存在，那么最简单的jQuery解决方案将是：
jQuery（'el'）。toggleClass（'is-present-will-be-removed-is-not-present-will-added'）

PPS我完全知道，如果您的选择器等于删除其他解决方案的类，那么jQuery（'.search-replace'）.removeClass（'search-replace'）.addClass（'whatever'）就可以了

但有时您会处理更多的任意集合。
从HTML片段开始：

<div class='helpTop ...

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

有时，当您有多个类并且确实需要覆盖所有类时，使用jQuery覆盖
类
属性最简单：

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

我使用swap div将缩略图中的self视频交换到主视频，反之亦然

我认为这将帮助您在两个div类之间进行切换

numberId=0
function swapVideo(){
  numberId++;
 console.log(numberId)
  if(numberId % 2 ==0){
  $('#self-video').attr('class', 'main-video');
    $('#trainer-video').attr('class', 'thumb-video');
  }else{
     $('#self-video').attr('class', 'thumb-video');
         $('#trainer-video').attr('class', 'main-video');
  }
}

numberId%2==0帮助跟踪并执行一个操作以进行此切换。
在jquery中使用addClass（）方法在GOT上分配不同的css类。现在我再次查看了您的示例，这些类可能不是您要添加/删除的实际类。不过，toggleClass是您的朋友：）switchClass不是一件事吗？@Jwan622如果您使用的是jquery ui，它就是。这个问题是关于普通jquery的。好东西。我们还可以使用链中的toggleClass来切换多个类，例如$（this）。toggleClass（“btn-wishlist_非活动”）。toggleClass（“btn-wishlist_活动”）$（'.btn-wishlist__图标'）.toggleClass（“btn-wishlist__图标+）.toggleClass（“btn-wishlist__图标-toplay”）请解释一下您的答案如何帮助解决问题question@Axel你能帮我用“猫头鹰旋转木马”替换“猫头鹰旋转木马-block2”类吗？@sloga你还需要我的建议吗。sry去派对有点晚了！这是一个jQueryUI功能：您只需编写
$（…）.toggleClass（“helpTop-helpBottom”）我认为这是替换类最有效的方法？
$('#myElement').attr('class', 'new-class1 new-class2 new-class3');

numberId=0
function swapVideo(){
  numberId++;
 console.log(numberId)
  if(numberId % 2 ==0){
  $('#self-video').attr('class', 'main-video');
    $('#trainer-video').attr('class', 'thumb-video');
  }else{
     $('#self-video').attr('class', 'thumb-video');
         $('#trainer-video').attr('class', 'main-video');
  }
}