gpt4 book ai didi

javascript - jQuery 切换/循环通过 3 个状态

转载 作者:搜寻专家 更新时间:2023-11-01 05:06:04 27 4
gpt4 key购买 nike

我有一个按钮,我需要运行 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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com