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

What is the best way to implement multiway toggle using javascript/jQuery?

本文关键字：最佳 方式 是什么 javascript jQuery 实现 多路 使用      更新时间：2023-09-26

我有一个div，可以显示3个图像(在背景中)每个指示一些变量的'状态':即部分，完整和无。对于每一种状态，我都有图片:part .gif, full.gif和none.gif(也就是说，这些是那个div的背景图片)

需要:循环队列的切换效果，以改变这个顺序的图像partial -> full -> none -> partial

因此，如果当前图像为'partial.gif'，用户单击div，则背景图像更改为序列中的下一个，即full.gif(如果它当前为full.gif，则更改为none.gif，然后更改为partial.gif，依此类推)。

幼稚的解决方案:有一堆if/else或开关情况，检查当前一个(图像)，然后根据数组查找决定哪一个是下一个。这是最好的方法吗?我可以利用jQuery的toggle函数吗?

(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。从jQuery中删除

这里是相关的文章

  • 哪里有fn。toggle(handler(eventObject)， handler(eventObject)…)消失了吗?
  • jquery更新后按钮停止工作

只要它是基于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类定义，而不影响脚本的功能。

相关文章：