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

我有一个div可以显示3个图像（在后台），每个图像都指示一些变量的'状态'：即部分，全部和无。对于这些状态中的每一个，我都有图像：partial.gif，full.gif和none.gif（即，这些是该div的背景图像）使用javascript/jQuery实现多路切换的最佳方式是什么？

需要：循环队列类似切换效果， - >全部 - >无 - >部分

所以，如果当前图像是'partial.gif'，并且用户点击div，背景图像会变为序列中的下一个图像，即full.gif（如果它目前full.gif变为none.gif和那partial.gif等等）。天真的解决方案：有一堆if/else或switch-case并检查当前的（image），然后根据数组查找哪一个是下一个。这是做这件事的最好方法吗？我能否以某种方式利用jQuery的切换功能？（PS：它不需要限制在图像上，但也可以用于不同的背景颜色序列等，我想知道它是一种很好的“通用”方法，例如，特定于背景图像，但如果我更改了背景颜色或字体代码的一部分，它应该仍然可以工作，我不希望它是纯粹的通用的，但只是足够容易修改其他属性。，那也没关系只是一个想法:)

来源

2011-07-10 PhD

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的

删除

以下是有关职位

来源

2011-07-10 12:50:07 mplungjan

Neat !!我也查了api参考。但是一个令人遗憾的问题是：这个函数列表可以任意长吗？我的意思是有4-5'function（）{...}？ – PhD

是的。任何长度，但他们将按输入的顺序执行。 – mplungjan

没关系，找到它:)以下是api doc所说的“如果提供了两个以上的处理程序，则.toggle（）将在所有这些处理程序之间循环，例如，如果有三个处理程序，则将调用第一个处理程序第一次点击，第四次点击，第七次点击等._“ – PhD

只要它是一个基于CSS的解决方案（在那里你可以切换类），你可以做这样的事情（未测试的代码）：

$('#element').click(function() { 
    // get current css class value. 
    var class = $(this).attr('class'); 

    // determine/increment number. 
    var nextNumber = parseInt(class.charAt(class.length - 1)) + 1; 

    // if too high, reset to first one. 
    if (nextNumber > 3) { 
    nextNumber = 1; 
    } 

    // remove old class and add new class. 
    $(this).removeClass(class).addClass('my_class' + nextNumber); 
});

这里假设您一次只有一个CSS类应用于元素。但如果情况并非如此，我相信你可以找到一个解决方法/调整。

这只是通用的，可以在不影响脚本功能的情况下换出CSS类定义。

来源

2011-07-10 12:44:46 Kon

是有道理的，但IMO @ mplungjan的解决方案是更清洁，是jQuery的API的一部分 - 我不知道那:)但是它的算法再造防止:) – PhD

啊，你知道什么..我不知道切换可能有两个以上的状态。这是我的一个疏忽。但是，我仍然宁愿使用类名，而不是自己的具体样式。所以，如果我是你，我会使用@ mplungjan的解决方案，但要删除/添加类。 – Kon

如果jQuery的切换无法解决您的问题，例如在使用keydown而不是单击或委托另一个事件的切换时，想到自定义解决方案会很有帮助。 –

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

回答

相关问题