jQuery用另一个类替换一个类

Question

我有这个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替换它。

Answer 1

要使用jQuery有效地执行此操作，您可以像这样链接它：

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

为了简单起见，您也可以像这样一步一步地进行操作（注意将jquery对象分配给var是不必要的，但是如果您在添加新类之前意外删除了您要定位的类并且直接访问它会感觉更安全dom节点通过它的jquery选择器，如$('.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 ');

Answer 2

你需要用CSS创建一个类 -

<br class="el replaced"><br class="el dont-search-replace">

然后你可以添加到元素

jQuery('el').toggleClass('is-present-will-be-removed is-not-present-will-be-added')

并删除它 -

jQuery('.search-replace').removeClass('search-replace').addClass('whatever')

Answer 3

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

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

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

Answer 4

从HTML片段开始：

<div class='helpTop ...

使用javaScript片段：

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

Answer 5

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

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

Answer 6

你可以使用jQuery方法qazxsw poi，qazxsw poi和qazxsw poi来操作哪些类应用于你的元素。只需定义不同的类，并根据需要添加/删除它们。

Answer 7

你可以使用.hasClass()和.addClass()。更多在.removeClass()。

Answer 8

在CSS文件中创建一个类：

.removeClass

然后在你的jQuery中

.addClass

Answer 9

你可以让他们两个使用“corpo_button”类，或类似的东西，然后在http://api.jquery.com只需调用

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

Answer 10

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

编辑

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

这是一个例子：

之前的标记：$(".corpo_button").click(...) js：$(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);
    });
};

---

用我的解决方案

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

---

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

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

---

PS如果确定要添加的类不存在并且要删除的类确实存在，那么最简单的jQuery解决方案将是： <br class="el replaced"><br class="el dont-search-replace replaced">

PPS我完全清楚，如果你的选择器等于除去其他解决方案的类，那就好了jQuery('.el').replaceClass('search-replace', 'replaced')。 但有时你会使用更多的任意集合。