使用JQuery在样式之间切换 [英] Using JQuery to toggle between styles

问题描述

下午好，

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

示例： / p>

我有两个样式（类），一个使段落为红色，另一个使段落为蓝色。我只想使用JQuery调用样式，而不是保存样式本身。

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

再次，我宁愿将风格分开并给出类名，并在两者之间切换JQuery。

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

任何想法将不胜感激！

Overmars

大家好！这是我做的，因为我提到我只是试图在两种风格之间切换。一种样式做某事，例如：使一个文本变成红色或改变一个图像，另一种样式使另一个事情发生。

感谢每一个人为你的时间耐心。你们都有所作为。

我在我的JQuery Cook Book中找到了答案。这里是代码：

  $（document）.ready（function（）{
 $（'。normalStyle'）。click（function（）{
 $（this）.toggleClass（'newStyle'）; 
}）; 
}）; 
  

解决方案

使用 toggleClass

从匹配元素集合中的每个元素添加或删除一个或多个类，具体取决于类的存在或switch参数的值。

  $（'div.foo'）。toggleClass b $ b if（$（this）.is（'。blue'））{
 return'red'; 
} else {
 return'blue'; 
} b $ b}）; 
  

此示例将切换 blue < div class =foo> 元素，如果其父元素为 red 否则，它将切换蓝色类。

或更短：

b $ b

  $（'div.blue'）。toggleClass（'red'）; 
  

一个切换类取决于使用的初始颜色（刚刚添加的红色类） p>

  $（'div.blue'）click（function（）{
 $（this）.toggleClass '）; 
}）; 
  

fiddle这里

或真正纯类替换（蓝色被删除，红色被添加和vv）：

  $（'div'）click（function（）{
 $（this）.toggleClass（'red blue'）
}）; 
  

fiddle Here

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!

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:

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

解决方案

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.

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

This example will toggle the blue class for <div class="foo"> elements if their parent element is of class red; otherwise, it will toggle the blue class.

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

fiddle here

or with really pure class replacement (the blue is removed and the red is added and vv):

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

fiddle here

这篇关于使用JQuery在样式之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！