我有一个按钮,我需要通过3状态.例如:静音,开和关
<html>
<head>
<!-- define mute/on/off styles -->
<style type="text/css">
.mute{ background:gray }
.on { background:green }
.off { background:red }
</style>
<!-- define the toggle/cycle function -->
<script language="javascript">
function toggleState(item){
if(item.className == "mute") {
item.className="on";
} else if(item.className == "on") {
item.className="off";
} else {
item.className="mute";
}
}
</script>
</head>
<body>
<!-- call 'toggleState' whenever clicked -->
<input type="button" id="btn" value="button" class="mute" onclick="toggleState(this)" />
</body>
</html>
我如何使用jQuery而不是使用纯JavaScript来循环使用它
试试这个:
var classNames = ['mute','on','off'];
$('div').click(function () {
$(this).toggleClass(function (i, className, b) {
var index = (classNames.indexOf(className) + 1) % classNames.length;
$(this).removeClass(className);
return classNames[index];
});
});
在这段代码中,className是旧类.然后通过classNames数组获取新类,然后返回它.
在返回之前,应该删除旧类.
使用此方法,您可以轻松地将3扩展为任何更大的数字.
这是jsfiddle.http://jsfiddle.net/f3qR3/2/
另一种情况
如果元素中有其他类,则可以使用以下代码,但它更复杂.
var classNames = ['mute', 'on', 'off'];
$('div').click(function () {
var $this = $(this);
$this.toggleClass(function (i, className, b) {
var ret_index;
$.each(classNames, function (index, value) {
if ($this.hasClass(value)) {
ret_index = (index + 1) % classNames.length;
}
});
$this.removeClass(classNames.join(' '));
return classNames[ret_index];
});
});
这是jsfiddle.http://jsfiddle.net/f3qR3/4/