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是不必要的，但是如果您在添加新类之前意外删除了您要定位的类，则感觉更安全通过其jquery选择器（如$('.theClassThatsThereNow')）直接访问dom节点：

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

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

(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

您可以使用.removeClass和.addClass。更多信息http://api.jquery.com。

Answer 6

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

Answer 7

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

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

Answer 8

在CSS文件中创建一个类：

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

然后在你的jQuery中

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

Answer 9

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

.greenclass {color:green;}

然后你可以用

将它添加到元素中

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

并使用 -

将其删除

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

Answer 10

你可以让他们俩都使用＆＃34; corpo_button＆＃34;类，或类似的东西，然后在$(".corpo_button").click(...)中调用$(this).toggleClass("corpo_buttons_asia corpo_buttons_global");

Answer 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')
标记后： 

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

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

<强> 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')就可以了。但有时你会使用更多任意的集合。

Answer 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 有助于跟踪并执行操作以进行此切换。

jQuery用另一个类替换一个类

12 个答案:

修改