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中这样做:

对于现代浏览器(请参阅此内容以查看我称之为现代的浏览器)

(假设一个元素与类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

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

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

从HTML片段开始:

<div class='helpTop ...

使用javaScript片段:

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

Answer 4

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

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

Answer 5

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

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