jQuery用另一个类替换一个类答案

【问题标题】：jQuery replace one class with anotherjQuery用另一个类替换一个类
【发布时间】：2021-04-21 03:39:31
【问题描述】：

我有这个 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');
});

因此，我可以创建另一个类并用 jQuery 替换它，而不是一直使用 .css()。

【问题讨论】：

在 jquery 中使用 addClass() 方法来分配不同的 css 类

标签： javascript jquery

【解决方案1】：

要使用 jQuery 有效地做到这一点，您可以像这样链接它：

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

为了简单起见，您也可以像这样逐步执行此操作（请注意，将 jquery 对象分配给 var 不是必需的，但如果您在添加新类之前不小心删除了您要定位的类，感觉更安全，并且正在通过其 jquery 选择器直接访问 dom 节点，例如 $('.theClassThatsThereNow')):

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

另外（因为有 js 标签），如果你想在 vanilla js 中做：

对于现代浏览器 (See this to see which browsers I'm calling modern)

（假设一个元素的类为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 ');

【讨论】：

switchClass 不是东西吗？
@Jwan622 如果你使用的是 jquery ui 的话。这个问题是关于常规 jquery 的。
好东西。我们还可以使用链中的 toggleClass 来切换多个类，例如$(this).toggleClass("btn-wishlist_inactive").toggleClass("btn-wishlist_active"); $('.btn-wishlist__icon').toggleClass("btn-wishlist__icon-plus").toggleClass("btn-wishlist__icon-toplay")

【解决方案2】：

你可以使用这个简单的插件：

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

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

【讨论】：

【解决方案3】：

从 HTML 片段开始：

<div class='helpTop ...

使用 JavaScript 片段：

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

【讨论】：

你可以写$(...).toggleClass("helpTop helpBottom");
你可以放弃 jQuery。使用：myNode.classList.toggle(... or myNode.classList.toggle('helpTop', condition); myNode.classList.toggle('helpBottom', !condition); 更好的是：myNode.classList.toggle('helpTop ', !myNode.classList.toggle('helpBottom', condition));

【解决方案4】：

有时当你有多个类并且你真的需要覆盖所有它们时，使用 jQuery 的.attr() 覆盖class 属性是最简单的：

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

【讨论】：

我认为这是最有效的替换类的方法？

【解决方案5】：

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

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

【讨论】：

这是一个 jQueryUI 功能：api.jqueryui.com/switchclass

【解决方案6】：

你需要用 CSS 创建一个类 -

.greenclass {color:green;}

然后您可以使用

将其添加到元素中

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

并用 - 删除它

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

【讨论】：

【解决方案7】：

您可以使用 jQuery 方法 .hasClass()、.addClass() 和 .removeClass() 来操作将哪些类应用于您的元素。只需定义不同的类并根据需要添加/删除它们。

【讨论】：

【解决方案8】：

您可以使用.removeClass 和.addClass。更多内容请参见http://api.jquery.com。

【讨论】：

【解决方案9】：

在您的 CSS 文件中创建一个类：

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

然后在你的 jQuery 中

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

【讨论】：

【解决方案10】：

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

【讨论】：

那些可能不是您想要添加/删除的实际类，现在我再次查看了您的示例。尽管如此，toggleClass 还是你的朋友 :)

【解决方案11】：

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 方式）。实际上，其他答案不会用另一个类替换一个类，而是添加一个类并删除另一个类，这在技术上根本不一样。

这是一个例子：

之前的标记： 
js:jQuery('.el').remove('search-replace').add('replaced')
标记后： 

用我的解决方案

js:jQuery('.el').replaceClass('search-replace', 'replaced')
标记后： 

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

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

附言如果确定要添加的类不存在并且要删除的类肯定存在，那么最简单的 jQuery 解决方案将是：
jQuery('el').toggleClass('is-present-will-be-removed is-not-present-will-be-added')

PPS 我完全知道，如果您的选择器等于删除其他解决方案的类，那么jQuery('.search-replace').removeClass('search-replace').addClass('whatever') 将正常工作。
但有时您会使用更随意的集合。

【讨论】：

请解释一下您的回答如何帮助解决问题
@Axel 你能帮我用“owl-carousel”替换类“owl-carousel-block2” - bryanbowers.me/seven/?q=node/5 stackoverflow.com/questions/57404871/owl-carousel-not-inline
@sloga 你还需要我的建议吗？对不起，聚会有点晚了！

【解决方案12】：

我已使用交换 div 将缩略图中的我自己的视频交换为主视频，反之亦然。

我认为这将帮助您在两个 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 帮助跟踪并执行操作以进行此切换。

【讨论】：