无线切换按钮升级功能

Question

问题:我想用三种方式切换我的单选按钮。

示例:所有灰色开始，首先单击按钮1将其更改为绿色，第二次单击相同的按钮1，将其更改为桃，任何后续单击都将在这两种状态之间循环。单击任何其他按钮都会将其重新设置为原始状态。

我有三个收音机式按钮。只有一个按钮可以选择像收音机这样的时间。此外，如果任何选定的按钮再次点击，它将取消检查。我想在这里面加入更多的东西。

我想要这样的东西：

最初，按钮是灰色的。

如果单击任何按钮，则该按钮从绿色变为灰色。再次单击选定的按钮会转回灰色。

，但，我最初想要的所有按钮都将保持灰色，但是如果我首先单击任何一个按钮，它将变成绿色，再次单击相同的按钮会给出另一种颜色(可以是任何颜色)。再次单击相同的按钮将返回绿色，并将继续。但是如果我点击另一个按钮，前面的按钮会更改为灰色，而当前按钮也可以这样做。

这是我大学的一个项目的要求。但找不到办法来做这样的事。

应该保持当前的功能。希望我的要求是清楚的。如果能做到的话，对我来说就太好了。

下面是当前示例的链接：JS Fiddle

HTML:

<div style="margin:0px auto; margin-top:100px; width:960px;">
    <a href="#">
        <span class="toggleButtonRadio normal">toggle Radio button</span>
    </a>


    <a href="#">
        <span class="toggleButtonRadio normal">toggle Radio button</span>
    </a>


    <a href="#">
        <span class="toggleButtonRadio normal">toggle Radio button</span>
    </a>
</div>

CSS

* {
 margin: 0;
 padding: 0;
 border: 0px;
}

body {
 background: #fafafa;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 0.813em;
 color:#333333;


}

a {color:#737373;text-decoration:none;
}

a:link { text-decoration: none;outline: none;
}

a:visited {text-decoration: none;
}

a:hover {color:#454545;
}

a:active {text-decoration: none;
}

ul {list-style: none; text-decoration: none;
}

ol {list-style-position: inside; color:#333333;padding:12px 10px 25px 15px;font-size: 1.07em;}
ol, li {padding-bottom:8px;}

img {}
em {color: #737373; font-weight:300;}

h1 {color: #737378; margin:20px 5px 20px 0px; font-size:2.4em; text-transform:uppercase;letter-spacing:1px; font-weight:100; text-shadow:1px 1px 1px #fff; }
h2 {color: #454545; margin:10px 5px 0px 0px;}
h3 {color: #454545; margin:10px 5px 0px 0px;}
h4 {color: #454545; margin:10px 5px 20px 0px; font-size:1.2em; width:98%; border-bottom:1px solid #eee;padding-bottom:10px;}
h5 {color: #454545; margin:10px 5px 0px 0px;}
h6 {color: #454545; margin:10px 5px 0px 0px;}

p { color:#333; font-size:1.154em; margin:5px 10px 10px 0px; padding-bottom:10px;line-height:140%;}

hr { border: 0; clear: both; display: block; width: 100%; background-color: #bbbbbb; height: 1px; margin: 5px 0px;
}

select {
 color: #454545;
}

.toggleButtonRadio , .toggleButton {
 background: #e1e1e1; 
 text-decoration: none;
 text-align: center;
 font-family: Helvetica, Arial, sans-serif;
 font-size: .769em;
 font-weight: 900;
 color: #454545;
 text-transform: uppercase;
 text-decoration: none;
 padding: 5px 10px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
 -webkit-box-shadow: 0px 0px 3px 0px rgba(64, 64, 64, .5);
box-shadow: 0px 0px 3px 0px rgba(64, 64, 64, .5);
}

.toggleButtonRadio:hover, .toggleButton:hover{
 background:#d4d4d4;
}

.toggleButtonRadio.active , .toggleButton.active{
background:#90bf00;
color:#fff;
}

.active:hover{
background:#7ca600;
}

.active2{

    background:#fcc79a;
}

JS

$('.toggleButtonRadio').click(function(){
    $('.toggleButtonRadio').not(this).removeClass("active");        
    $(this).toggleClass("active");


    });

Answer 1

我想这就是你想要达到的目标？

您希望第二次单击按钮来激活第二个活动类？

$('.toggleButtonRadio').click(function () {
    if ($(this).hasClass("normal")) {
        $(this).addClass("active");
        $(this).removeClass("normal");
    } else if ($(this).hasClass("active")) {
        $(this).addClass("active2");
        $(this).removeClass("active");
    } else if ($(this).hasClass("active2")) {
        $(this).addClass("active");
        $(this).removeClass("active2");
    }

    $('.toggleButtonRadio').not(this).removeClass("active");
    $('.toggleButtonRadio').not(this).removeClass("active2");
    $('.toggleButtonRadio').not(this).addClass("normal");
});

http://jsfiddle.net/Mutmatt/HPC5y/