Question

我有一个div可以显示3个图像（在后台），每个图像表示某些变量的“状态”：即，部分，全部和无。对于这些状态中的每一个，我都有图像：partial.gif，full.gif和none.gif（即，这些是该div的背景图像）

需要：循环队列，如切换效果，以此顺序更改图像部分 - ＆gt;完整 - ＆gt;无 - ＆gt;部分

因此，如果当前图像是'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

中删除

以下是相关帖子

Answer 2

只要它是一个基于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类定义。

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

2 个答案: