使用JQuery在样式之间切换

Question

下午好,

我正在寻找一种在样式之间切换的方法:

例:

我有两个样式(类),一个使段落变红,另一个使段落变蓝.我只想使用JQuery来调用样式,而不是自己保存样式.

因此,当我单击一个按钮时,段落变为红色,当我再次单击时,它变为蓝色.

同样,我宁愿将样式分开并给出类名,并在两者之间切换JQuery.

我已经搜索了网络,但不断提出显示/隐藏示例,其中样式嵌入到JQuery函数中.

任何想法将不胜感激!

奥维马斯

大家好!这就是我所做的,正如我所提到的,我只是试图在两种风格之间切换.一种风格做了一些事情,例如:使文本变红或改变图像,而另一种风格使另一种事情发生.

感谢每一位耐心的人.你们都有所作为.

我在JQuery Cook Book中找到了答案.第3章事件处理页面69.以下是代码:

$(document).ready(function() {
    $('.normalStyle').click(function(){
        $(this).toggleClass('newStyle');
    });
});

Answer 1

使用toggleClass

根据类的存在或switch参数的值,从匹配元素集中的每个元素添加或删除一个或多个类.

$('div.foo').toggleClass(function() {
  if ($(this).is('.blue')) {
    return 'red';
  } else {
    return 'blue';
  }
});

如果元素的父元素是blue类,<div class="foo">则此示例将切换元素的类red; 否则,它将切换blue班级.

甚至更短:

 $('div.blue').toggleClass('red');

切换的类会使初始颜色变为原始颜色(刚刚添加了红色类),如下所示:

 $('div.blue').click(function() {
     $(this).toggleClass('red');
 });

在这里小提琴

或者使用非常纯粹的类替换(删除蓝色并添加红色和vv):

$('div').click(function() {
    $(this).toggleClass('red blue')
 });

在这里小提琴

Answer 2

您可以使用.toggleClass()打开和关闭课程来更改文本颜色。

$("#someButton").click(function(){
  $("#someP").toggleClass("makeRed");
});

jsfiddle 上的简单示例