Javascript jQuery 用另一个替换一个类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8249785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery replace one class with another
提问by user1047517
I have this jQuery and I'm changing styles in it but I've heard that the correct way to do it is to create a separate style and just replace classes with jQuery. Can you explain me how to do it correctly:
我有这个 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');
});
So instead of using .css()all the time I can create another class and just replace it with jQuery.
因此，我可以创建另一个类并将其替换为 jQuery，而不是一直使用.css()。
回答by Rooster
To do this efficiently using jQuery, you can chain it like so:
要使用 jQuery 有效地做到这一点，您可以像这样链接它：
$('.theClassThatsThereNow').addClass('newClassWithYourStyles').removeClass('theClassThatsTherenow');
For simplicities sake, you can also do it step by step like so (note assigning the jquery object to a var isnt necessary, but it feels safer in case you accidentally remove the class you're targeting before adding the new class and are directly accessing the dom node via its jquery selector like $('.theClassThatsThereNow')):
为简单起见，您也可以像这样一步一步地完成（注意将 jquery 对象分配给 var 不是必要的，但如果您在添加新类之前不小心删除了您所针对的类并直接访问，则感觉更安全dom 节点通过其 jquery 选择器（如$('.theClassThatsThereNow')）：
var el = $('.theClassThatsThereNow');
el.addClass('newClassWithYourStyles');
el.removeClass('theClassThatsThereNow');
Also (since there is a js tag), if you wanted to do it in vanilla js:
另外（因为有一个 js 标签），如果你想在 vanilla js 中做到这一点：
For modern browsers (See this to see which browsers I'm calling modern)
对于现代浏览器（请参阅此内容以了解我将哪些浏览器称为现代浏览器）
(assuming one element with class theClassThatsThereNow)
（假设一个元素为 class theClassThatsThereNow）
var el = document.querySelector('.theClassThatsThereNow');
el.classList.remove('theClassThatsThereNow');
el.classList.add('newClassWithYourStyleRules');
Or older browsers:
或较旧的浏览器：
var el = document.getElementsByClassName('theClassThatsThereNow');
el.className = el.className.replace(/\s*theClassThatsThereNow\s*/, ' newClassWithYourStyleRules ');
回答by berniecc
You may use this simple plugin:
您可以使用这个简单的插件：
(function ($) {
$.fn.replaceClass = function (pFromClass, pToClass) {
return this.removeClass(pFromClass).addClass(pToClass);
};
}(jQuery));
Usage:
用法：
$('.divFoo').replaceClass('colored','blackAndWhite');
Before:
前：
<div class="divFoo colored"></div>
After:
后：
<div class="divFoo blackAndWhite"></div>
Note: you may use various space separated classes.
注意：您可以使用各种空格分隔的类。
回答by horiatu
Starting with the HTML fragment:
从 HTML 片段开始：
<div class='helpTop ...
use the javaScript fragment:
使用 javaScript 片段：
$(...).toggleClass('helpTop').toggleClass('helpBottom');
回答by Mohan Prasad
In jquery to replace a class with another you can use jqueryUI SwitchClassoption
在 jquery 中用另一个类替换一个类，您可以使用jqueryUI SwitchClass选项
$("#YourID").switchClass("old-class-here", "new-class-here");
回答by Mohan Prasad
You can use .removeClassand .addClass. More in http://api.jquery.com.
您可以使用.removeClass和.addClass。更多在http://api.jquery.com。
回答by Jake Feasel
You can use jQuery methods .hasClass(), .addClass(), and .removeClass()to manipulate which classes are applied to your elements. Just define different classes and add/remove them as necessary.
您可以使用 jQuery 方法.hasClass()、.addClass()和.removeClass()来操作哪些类应用于您的元素。只需定义不同的类并根据需要添加/删除它们。
回答by Alex Peattie
Create a class in your CSS file:
在 CSS 文件中创建一个类：
.active {
z-index: 20;
background: rgb(23,55,94)
color: #fff;
}
Then in your jQuery
然后在你的 jQuery 中
$(this).addClass("active");
回答by ipr101
You'd need to create a class with CSS -
你需要用 CSS 创建一个类 -
.greenclass {color:green;}
Then you could add that to elements with
然后你可以将它添加到元素中
$('selector').addClass("greenclass");
and remove it with -
并删除它 -
$('selector').removeClass("greenclass");
回答by Jeremy T
you could have both of them use a "corpo_button" class, or something like that, and then in $(".corpo_button").click(...)just call $(this).toggleClass("corpo_buttons_asia corpo_buttons_global");
你可以让他们都使用“corpo_button”类，或者类似的东西，然后$(".corpo_button").click(...)只需调用$(this).toggleClass("corpo_buttons_asia corpo_buttons_global");
回答by Axel
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);
});
};
EDIT
编辑
This is my solution to replace one class with another (the jQuery way). Actually the other answers don't replace one class with anotherbut add one class and remove anotherwhich technically is not the same at all.
这是我用另一个（jQuery 方式）替换一个类的解决方案。实际上，其他答案不会用另一个类替换一个类，而是添加一个类并删除另一个类，这在技术上根本不相同。
Here is an example:
下面是一个例子：
Markup before: <br class="el search-replace"><br class="el dont-search-replace">
js: jQuery('.el').remove('search-replace').add('replaced')
Markup after: <br class="el replaced"><br class="el dont-search-replace replaced">
标记之前：<br class="el search-replace"><br class="el dont-search-replace">
js：jQuery('.el').remove('search-replace').add('replaced')
标记之后：<br class="el replaced"><br class="el dont-search-replace replaced">
With my solution
用我的解决方案
js: jQuery('.el').replaceClass('search-replace', 'replaced')
Markup after: <br class="el replaced"><br class="el dont-search-replace">
js：jQuery('.el').replaceClass('search-replace', 'replaced')
标记之后：<br class="el replaced"><br class="el dont-search-replace">
Imagine a string replace function in whatever language:
想象一下任何语言的字符串替换函数：
Search: "search-replace"
Replace: "replaced"
Subject: "dont-search-replace"
Result: "dont-search-replace"
Result (wrongbut actually what the other solutions produce): "dont-search-replace replaced"
搜索：“search-replace”
替换：“replaced”
主题：“dont-search-replace”
结果：“dont-search-replace”
结果（错误但实际上是其他解决方案产生的）：“dont-search-replace 替换”
PSIf it's for sure that the class to add is not present and the class to remove is present for sure the most simple jQuery solution would be: jQuery('el').toggleClass('is-present-will-be-removed is-not-present-will-be-added')
PS如果确定要添加的类不存在并且要删除的类肯定存在，那么最简单的jQuery解决方案是：jQuery('el').toggleClass('is-present-will-be-removed is-not-present-will-be-added')
PPSI'm totally aware that if your selector equals the class to remove the other solutions would work just fine jQuery('.search-replace').removeClass('search-replace').addClass('whatever').
But sometimes you work with more arbitrary collections.
PPS我完全知道，如果您的选择器等于删除其他解决方案的类就可以了jQuery('.search-replace').removeClass('search-replace').addClass('whatever')。
但有时您会使用更多任意集合。
