jquery - 使用 JQuery 在样式之间切换

Question

下午好

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

例子:

我有两种样式(类)，一种将段落设为红色，另一种将段落设为蓝色。我只想使用 JQuery 调用样式，而不是保存样式本身。

所以当我点击一个按钮时，段落变成红色，当我再次点击时，它变成蓝色。

同样，我宁愿将样式分开并给定类名，并让 JQuery 在两者之间切换。

我在网上搜索过，但一直想出显示/隐藏样式嵌入到 JQuery 函数中的示例。

任何想法将不胜感激!

奥维马斯

大家好!这就是我所做的，正如我提到的，我只是想在两种风格之间切换。一种样式做某事，例如:将文本变为红色或更改图像，而另一种样式使另一件事发生。

感谢大家的耐心等待。你们确实有所作为。

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

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

Answer 1

使用toggleClass

根据类的存在或开关参数的值，从匹配元素集中的每个元素添加或删除一个或多个类。

$('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');
 });

fiddle here

或使用真正的纯类替换(删除蓝色并添加红色和 vv):

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

fiddle here