jQuery 添加类并删除所有其他类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13816730/
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 add class and remove all others
提问by sheriffderek
So I have some nav anchors. I want to change some basic color schemes on the page when these are clicked. The only way I've been able to do this is with the code below.
所以我有一些导航锚。我想在单击这些时更改页面上的一些基本配色方案。我能够做到这一点的唯一方法是使用下面的代码。
It works fine, but I can't help but think there is a more elegant way. Does anybody know if it's possible to strip the classes in one foul swoop?
它工作正常，但我不禁想到有一种更优雅的方式。有谁知道是否有可能在一次犯规中取消课程？
EDIT: This could have been more clear. I didn't want the original classes gone. Just the classes added with jQuery I guess. Sorry for the confusion.
编辑：这本来可以更清楚。我不希望原来的课程消失。我猜只是用 jQuery 添加的类。对困惑感到抱歉。
Thanks.
谢谢。
EDIT: SEE THIS FIDDLE
编辑：看这个小提琴
Tried to implement all solutions.
试图实施所有解决方案。
getting an "{"error": "Please use POST request"}" though...
得到一个 "{"error": "请使用 POST 请求"}" 不过......
EDIT: this was because of href="?" vs. href="#" as pointed out.
编辑：这是因为 href="?" 与 href="#" 所指出的。
$(".home").click(function() {
$(".primary-color").addClass("one");
$(".primary-color").removeClass("two");
$(".primary-color").removeClass("three");
$(".primary-color").removeClass("four");
$(".primary-color").removeClass("five");
});
$(".services").click(function() {
$(".primary-color").addClass("two");
$(".primary-color").removeClass("one");
$(".primary-color").removeClass("three");
$(".primary-color").removeClass("four");
$(".primary-color").removeClass("five");
});
$(".pricing").click(function() {
$(".primary-color").addClass("three");
$(".primary-color").removeClass("one");
$(".primary-color").removeClass("two");
$(".primary-color").removeClass("four");
$(".primary-color").removeClass("five");
});
$(".special-thing").click(function() {
$(".primary-color").addClass("four");
$(".primary-color").removeClass("one");
$(".primary-color").removeClass("two");
$(".primary-color").removeClass("three");
$(".primary-color").removeClass("five");
});
$(".contact").click(function() {
$(".primary-color").addClass("five");
$(".primary-color").removeClass("one");
$(".primary-color").removeClass("two");
$(".primary-color").removeClass("three");
$(".primary-color").removeClass("four");
});
回答by Joonas
You could do it this way
你可以这样做
http://jsfiddle.net/lollero/ZUJUB/
http://jsfiddle.net/lollero/ZUJUB/
$(document).ready(function() {
$(".home, .services, .pricing, .special-thing, .contact").on("click", function() {
$(".primary-color")
// Remove all classes
.removeClass()
// Put back .primary-color class + the clicked elements class with the added prefix "pm_".
.addClass('primary-color pm_' + $(this).attr('class') );
});
});?
CSS:
CSS：
.primary-color {
width: 100px;
height: 100px;
border: 1px solid #e1e1e1;
}
.pm_services { background: red; }
.pm_home { background: green; }
?
HTML:
HTML：
<div class="services">services</div>
<div class="home">home</div>
<div class="primary-color">Primary-color</div>
?
or something like this:
或类似的东西：
http://jsfiddle.net/lollero/ZUJUB/1/
http://jsfiddle.net/lollero/ZUJUB/1/
This fitted into the OP's structure: http://jsfiddle.net/lollero/EXq83/5/
这适合 OP 的结构：http: //jsfiddle.net/lollero/EXq83/5/
jQuery:
jQuery：
$(document).ready(function() {
$("#buttons > div").on("click", function() {
$(".primary-color")
// Remove all classes
.removeClass()
// Put back .primary-color class + the clicked elements index with the added prefix "pm_".
.addClass('primary-color pm_' + ( $(this).index() + 1 ) );
});
});?
CSS:
CSS：
.primary-color {
width: 100px;
height: 100px;
border: 1px solid #e1e1e1;
}
.pm_1 { background: red; }
.pm_2 { background: green; }
?
HTML:
HTML：
<div id="buttons">
<div class="services">services</div>
<div class="home">home</div>
</div>
<div class="primary-color">Primary-color</div>
?
回答by Vivek S
You cans use attr method,
你可以使用 attr 方法，
$(".xxx").attr("class","newclass");
回答by c_kick
Just $(".primary-color").removeClass()(without specifying the class) should work!
只是$(".primary-color").removeClass()（不指定类）应该工作！
Or, if you just need to strip the classes (leaving other, important classes), you can group it into 1 call, separating the classes by spaces:
或者，如果您只需要剥离类（留下其他重要的类），您可以将其分组为 1 个调用，用空格分隔类：
$(".primary-color").removeClass("two three four five");
回答by aNewStart847
This should work:
这应该有效：
$(".home").click(function() {
$(".primary-color").removeClass().addClass("one");
});
回答by vlcekmi3
you can use removeClass()without parameter to remove all classes
see: http://api.jquery.com/removeClass/
您可以使用removeClass()不带参数来删除所有类，
请参见：http: //api.jquery.com/removeClass/
$(".primary-color").removeClass();
or use space-separated notation to remove your specified classes:
或使用空格分隔的符号来删除您指定的类：
$(".primary-color").removeClass('one two');
or set completely new class attribute by attr():
或通过以下方式设置全新的类属性attr()：
$(".primary-color").attr('class','one two');
回答by mr_lewjam
you can remove all classes from an element by doing
您可以通过执行从元素中删除所有类
$("#item").removeClass();
Calling removeClass with no parameters will remove all of the item's classes.
不带参数调用 removeClass 将删除项目的所有类。
Do this before you do addClassand your code will be reduced
在你这样做之前这样做addClass，你的代码将被减少
回答by Neil
I believe this is what you're looking for. Rather than add and subtract, you should simply set the class attribute. Granted, if there are classes you which to retain, you can set those as well, but if that isn't suitable, you should probably consider doing it in another way entirely.
我相信这就是你要找的。您应该简单地设置 class 属性，而不是添加和减去。当然，如果有要保留的类，您也可以设置它们，但如果这不合适，您可能应该考虑完全以另一种方式来做。
$(".home").click(function() {
$(".primary-color").attr("class", "one");
});
回答by michaelward82
A lot of contractiosn can be applied. Without knowing the specifics of your code, it's difficult to make any further changes.
可以应用很多收缩。在不知道代码的细节的情况下，很难进行任何进一步的更改。
$(".home, .contact, .special-thing, .pricing, .services").click(function() {
$(".primary-color")
.addClass("one")
.removeClass("two three four five");
});
