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

切换的类会使初始颜色（刚刚添加的红色类）用于：

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

<强> fiddle here

或者使用非常纯粹的类替换（删除蓝色并添加红色和vv）：

{{1}}

<强> fiddle here

Answer 2

您可以使用.toggleClass()在课堂上打开和关闭以更改文字颜色。

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

<强> Simple example on jsfiddle

Answer 3

请看这篇文章。 jquery background from image to color and back again

我希望它会有所帮助： - ）

它与我所了解的基本相同。

您可以将样式设置为红色/蓝色，而不是在图像和颜色之间进行切换。

Answer 4

我认为你需要这样的东西：

基于jQuery构建的Styleswitch样式表切换器 http://www.kelvinluck.com/2009/07/jquery-styleswitch-now-with-toggle/

Answer 5

试试这个：

<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>

使用JQuery在样式之间切换

5 个答案: