使用 JQuery 在样式之间切换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6010790/
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 to toggle between styles
提问by Overmars
Good afternoon,
下午好，
I am searching for a way to Toggle between styles:
我正在寻找一种在样式之间切换的方法：
Example:
例子：
I have two styles(classes), one makes the paragraph red and the other makes the paragraph blue. I only want to use JQuery to call the styles, not to hold the styles itself.
我有两种样式（类），一种使段落变为红色，另一种使段落变为蓝色。我只想使用 JQuery 来调用样式，而不是保存样式本身。
So when I click a button, the paragraph turns red, when I click again, it turns blue.
所以当我点击一个按钮时，段落变成红色，当我再次点击时，它变成蓝色。
Again, I would rather have the style separate and given class names and have JQuery switch between the two.
同样，我宁愿将样式分开并给定类名，并在两者之间使用 JQuery 切换。
I have search the net but keep coming up with show/hide examples where the styles are embedded into the JQuery function.
我已经在网上搜索过，但不断提出显示/隐藏样式的示例，其中样式嵌入到 JQuery 函数中。
Any ideas will be appreciated!
任何想法将不胜感激！
Overmars
奥维马斯
Hello everyone! This is what I did, as I mentioned I was simply trying to toggle between two styles. One styles does something, example: Make a text red or change an image and the other style makes another thing happened.
大家好！这就是我所做的，正如我所提到的，我只是试图在两种风格之间切换。一种样式会做一些事情，例如：将文本变为红色或更改图像，而另一种样式会导致另一件事发生。
Thanks every one for your time a patience. You all do make a difference.
感谢每一位您的耐心等待。你们都会有所作为。
I found the answer in my JQuery Cook Book. Chapter 3. Event Handling Page 69. Here is the code:
我在我的 JQuery Cook Book 中找到了答案。第 3 章事件处理第 69 页。这是代码：
$(document).ready(function() {
$('.normalStyle').click(function(){
$(this).toggleClass('newStyle');
});
});
回答by Caspar Kleijne
use toggleClass
使用切换类
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
根据类的存在或 switch 参数的值，从匹配元素集中的每个元素中添加或删除一个或多个类。
$('div.foo').toggleClass(function() {
if ($(this).is('.blue')) {
return 'red';
} else {
return 'blue';
}
});
This example will toggle the blueclass for <div class="foo">elements if their parent element is of class red; otherwise, it will toggle the blueclass.
如果元素的父元素属于blueclass ，<div class="foo">则此示例将切换元素的类red；否则，它将切换blue类。
or even shorter:
甚至更短：
$('div.blue').toggleClass('red');
a toggled class outrules the initial color, (red class is just added) as used in:
一个切换类超出了初始颜色，（红色类刚刚添加），用于：
$('div.blue').click(function() {
$(this).toggleClass('red');
});
or with really pure class replacement (the blue is removed and the red is added and vv):
或者使用真正的纯类替换（蓝色被移除，红色被添加和 vv）：
$('div').click(function() {
$(this).toggleClass('red blue')
});
回答by Mark Coleman
You can use .toggleClass()to toggle on and off your class to change your text color.
您可以使用.toggleClass()打开和关闭课程来更改文本颜色。
$("#someButton").click(function(){
$("#someP").toggleClass("makeRed");
});
回答by Guidhouse
Look at this post pls. jquery background from image to color and back again
请看这个帖子。 jquery 背景从图像到颜色再返回
i hope it will help :-)
我希望它会有所帮助:-)
it is basicly the same as what I understand you are looking for.
它与我所了解的您正在寻找的内容基本相同。
In stead of changing between an image and a colour, you can make the styles red/blue.
您可以将样式设置为红色/蓝色，而不是在图像和颜色之间进行更改。
回答by Mohammad Ali Akbari
I think you need something like:
我认为你需要这样的东西：
Styleswitch stylesheet switcher built on jQuery http://www.kelvinluck.com/2009/07/jquery-styleswitch-now-with-toggle/
基于 jQuery 的 Styleswitch 样式表切换器 http://www.kelvinluck.com/2009/07/jquery-styleswitch-now-with-toggle/
回答by Cos Callis
Try this:
尝试这个：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.aParagraph
{
width:700px;
font-family:Verdana;
font-size:15pt;
border: 3px inset green;
}
.blueParagraph
{
color:Blue;
}
.redParagraph
{
color:Red;
}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
});
function colorRed() {
var P = $("#theParagraph");
P.removeClass("blueParagraph");
P.addClass("redParagraph");
}
function colorBlue() {
var P = $("#theParagraph");
P.removeClass("redParagraph");
P.addClass("blueParagraph");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="makeRed" onclick="colorRed();" value="Turn Red" />
<input type="button" id="makeBlue" onclick="colorBlue();" value="Turn Blue" />
<div id="theParagraph" class="aParagraph redParagraph">
Good afternoon,
I am searching for a way to Toggle between styles:
Example:
I have two styles(classes), one makes the paragraph red and the other makes the paragraph blue. I only want to use JQuery to call the styles, not to hold the styles itself.
So when I click a button, the paragraph turns red, when I click again, it turns blue.
Again, I would rather have the style separate and given class names and have JQuery switch between the two.
I have search the net but keep coming up with show/hide examples where the styles are embedded into the JQuery function.
Any ideas will be appreciated!
</div>
</form>
</body>
</html>
