javascript 使用 JQuery removeClass() 删除除一个之外的所有类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14322225/
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
Using JQuery removeClass() to remove all classes but one
提问by talemyn
Okay, I've got an interesting one (well, interesting to me, anyway :) ).
好的，我有一个有趣的（好吧，反正对我来说很有趣:)）。
I've got a situation where I have a div with a static class value, but it also can have a single, "secondary class" assigned that is dynamic. When the user makes a selection, any existing secondary class needs to be removed and the new class added.
我有一种情况，我有一个带有静态类值的 div，但它也可以分配一个动态的“二级类”。当用户进行选择时，需要删除任何现有的二级类并添加新类。
Ignoring using an id value (standards for the project use the class . . . can't be changed), is there an elegant way to simply ignore the first class and remove whatever other class is there, before adding the new one?
忽略使用 id 值（项目使用类的标准......无法更改），在添加新类之前，是否有一种优雅的方法可以简单地忽略第一个类并删除存在的任何其他类？
Example Starting HTML:
示例起始 HTML：
<div class="staticClass dynaClass1" />
Example JS:
示例JS：
function updateClass(newSecondaryClass) {
$(".staticClass") . . . **** remove any class besides "staticClass" ****
$(".staticClass").addClass(newSecondaryClass);
}
If the function is called using updateClass("dynaClass2");, the resulting HTML should be:
如果使用 调用该函数updateClass("dynaClass2");，则生成的 HTML 应为：
<div class="staticClass dynaClass2" />
I can think of ways of doing it involving just removing all classes using removeClass();and adding "staticClass" back in when adding the new class, or using attr("class", "staticClass " + newSecondaryClass);, but I'm wondering if there isn't a way to handle it without having to touch the static class at all?
我可以想到这样做的方法，包括removeClass();在添加新类或使用时删除所有类并使用“staticClass”重新添加attr("class", "staticClass " + newSecondaryClass);，但我想知道是否没有办法处理它而不必触摸静态类？
In the end, I guess this is an academic question, more than anything . . . just seems like it's something that should be doable, but I don't know how to do it. :D
最后，我想这是一个学术问题，比什么都重要。. . 似乎这应该是可行的，但我不知道该怎么做。:D
采纳答案by Beat Richartz
You can pass a function to remove class, which returns all but the static Classes:
您可以传递一个函数来删除类，它返回除静态类之外的所有类：
$('.staticClass').removeClass(function(index, klass) {
return klass.replace(/(^|\s)+staticClass\s+/, '');
})
This is returning all the classes that are on the object, without the static one, and therefore removes all classes but the static one.
这将返回对象上的所有类，没有静态类，因此删除了除静态类之外的所有类。
回答by Konstantin Dinev
You can remove all classes and add the one you want to leave:
您可以删除所有课程并添加要离开的课程：
$(".staticClass").removeClass().addClass('staticClass');
Calling removeClass()without a parameter removes all classes.
removeClass()不带参数调用会删除所有类。
If you don't want to do that then you can simply modify the class attribute:
如果你不想这样做，那么你可以简单地修改类属性：
$(".staticClass").attr('class', 'staticClass');
回答by gfullam
Pass a function to .removeClass()
传递一个函数给 .removeClass()
A revision of Beat Richartz's answer on this page.
Beat Richartz 在本页上的回答的修订版。
Note: I tried to post this as an edit and it was rejected. The concept is identical, with an improved RegEx.
注意：我试图将此作为编辑发布，但被拒绝了。这个概念是相同的，只是改进了 RegEx。
Improved RegEx provides word-boundary matching with multiple classes
改进的 RegEx 提供了多个类的词边界匹配
// Remove all classes except those specified
$('span').removeClass(function () {
return $(this).attr('class').replace(/\b(?:hello|world)\b\s*/g, '');
});
Before:
前：
<span class="hello foo">hello</span> <span class="world bar">world</span>`
After:
后：
<span class="hello">hello</span> <span class="world">world</span>`
Try it:http://jsfiddle.net/gfullam/52eeK/3/
试试看：http : //jsfiddle.net/gfullam/52eeK/3/
Try it as a jQuery plugin:http://jsfiddle.net/gfullam/52eeK/5/
尝试将其作为 jQuery 插件：http : //jsfiddle.net/gfullam/52eeK/5/
FWIW: This method is necessary when you don't want to replace the existing classes with other classes as in .attr('class', '<final list of classes>'), but instead just want to remove those that don't match a list of classes.
FWIW：当您不想用其他类替换现有类时，这种方法是必要的.attr('class', '<final list of classes>')，而是只想删除那些与类列表不匹配的类。
回答by chrisbradbury
You can set it's required classes using the .attr()function. So:
您可以使用该.attr()函数设置所需的类。所以：
$('.staticClass').attr('class','<any classes required');
This will replace any classes that were originally there, and add the new ones.
这将替换原来存在的所有类，并添加新的类。
回答by drinchev
All of your classes are manipulated by calling the Javascript DOM element.className, so basically jQuery's addClassjust replaces that string. You can see that in the Github source.
你所有的类都是通过调用 Javascript DOM 来操作的element.className，所以基本上 jQueryaddClass只是替换了那个字符串。你可以在Github 源码中看到。
Which all means that if you call
这意味着如果你打电话
$('.staticClass').addClass('someClass');
The element.classNameis replaced anyway, but with the new class included. ( this means that your staticClassis actually touched :)
将element.className被替换反正，但随着新类包括在内。（这意味着你staticClass真的被感动了:)
When you call
你打电话的时候
$('.staticClass').removeClass().addClass('staticClass');
you will replace that string twice and there is no problem doing that.
您将替换该字符串两次，这样做没有问题。
