我有一个按钮，我需要运行 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/
关于javascript - jQuery 切换/循环通过 3 个状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15519857/