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

Question

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

需要:循环队列像切换效果,用于按此顺序更改图像partial - > full - > none - > partial

因此,如果当前图像是'partial.gif'并且用户单击div,则背景图像将更改为序列中的下一个图像,即full.gif(如果它当前是full.gif,则会更改为none.gif并且到partial.gif等).

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

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

Answer 1

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)")
  }
});

UPDATE fn.toggle已从jQuery中删除

这是相关的帖子

• fn.toggle(handler(eventObject),handler(eventObject)...)哪里去了？
• 在jquery更新后,Toggle停止工作