描述:开关是同一个事物控制两种不同的状态,开关是唯一的,但是内容是改变的
例如:开和关的切换,本来为开的状态,点击切换为关的状态,开关随意切换。具体实现如下
定义一个开关onOff=1,当第一次点击时,判断当前状态,重新赋值,每次取相反值即可。
var onOff=1;
$("button").on('click',function(){
if(onOff==1){
$(this).text("关");
onOff=0;
}else{
$(this).text("开");
onOff=1;
}
})
比较复杂一点的应该因问题而已
例如:三个按钮(多选框类似,最少存在一个选择的),如红黄绿三色,开始第一个红底为默认,其余为白底,可以点击自身切换不同颜色,如红底的切换一次为白底,在切换为红底,来回变换。考虑使用一个开关会相互影响执行效果,所以找唯一值当做开关,进行变换。具体实现如下:
var onOff = 1;
$('span').on("click", function() {
if($(this).attr("class") == null || $(this).attr("class") == "" || $(this).attr("class") == undefined) {
onOff++;
if($(this).text() == "红") {
$(this).attr("class", "red")
} else if($(this).text() == "黄") {
$(this).attr("class", "yellow")
} else if($(this).text() == "绿") {
$(this).attr("class", "green")
}
} else {
if(onOff > 1) {
$(this).removeClass();
onOff--;
}
}
})
详细效果见:https://github.com/yijianchuanxinwq/switch.git