gpt4 book ai didi

javascript - 使用 javascript/jQuery 实现多路切换的最佳方法是什么?

转载 作者:行者123 更新时间:2023-11-29 16:25:13 25 4
gpt4 key购买 nike

我有一个 div,可以显示 3 个图像(在后台),每个图像指示某些变量的“状态”:即部分、完整和无。对于每个状态,我都有图像:partial.gif、full.gif 和 none.gif(即,这些是该 div 的背景图像)

需要:类似循环队列的切换效果,用于按部分 -> 完整 -> 无 -> 部分的顺序更改图像

因此,如果当前图像是“partial.gif”并且用户单击 div,则背景图像将更改为序列中的下一张,即 full.gif(如果当前图像是 full.gif,则背景图像将更改为无。 gif 以及partial.gif 等等)。

天真的解决方案:有一堆 if/else 或 switch-case 并检查当前的图像(图像),然后根据数组查找决定下一个是哪一个。这是最好的方法吗?我可以以某种方式利用 jQuery 的切换功能吗?

(PS:它不必限于图像,但也可以适用于不同的背景颜色序列等,我想知道这是一种很好的“通用”方法,即,示例可能是特定于背景图像,但如果我更改了背景颜色或字体的部分代码,它应该仍然可以工作。我不希望它纯粹是通用的,但足够了,这样很容易修改其他属性。如果没有,这也很好。只是一个想法:)

最佳答案

http://api.jquery.com/toggle-event/

准确地说http://api.jquery.com/toggle-event/#example-0正是您想要的...

$("#div1").toggle(
function() {
$(this).css("background-image","url(full.png)")
},
function() {
$(this).css("background-image","url()")
},
function() {
$(this).css("background-image","url(partial.png)")
}
});

更新 fn.toggle 已从 jQuery 中删除

这里是相关帖子

关于javascript - 使用 javascript/jQuery 实现多路切换的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6641136/

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