Question

I have a div that can display 3 images (in the background) each indicating the ‘state’ of some variable: i.e., partial, full and none. For each of these states I have images: partial.gif, full.gif and none.gif (i.e., these are background images of that div)

Need: Circular queue like toggling effect for changing the images in this order partial -> full -> none -> partial

So if the current image is ‘partial.gif’ and the user clicks the div the background image changes to the next one in the sequence i.e., full.gif (and if it is currently full.gif it changes to none.gif and that to partial.gif and so on).

Naive solution: have a bunch of if/else’s or switch-case and check the current one (image) and then decide based on array look up which is the next one. Is this the best way of doing it? Can I leverage jQuery’s toggle function somehow?

(PS: It need not be restricted to images, but could also be for different background color sequences etc., I’d like to know what it is a good ‘generic’ way of doing it i.e., The example may be specific for background images but if I changed part of that code for background-color or font it should still work. I don’t want it to be purely generic, but just enough so it is easy to modify for other attributes. If not, that’s fine too. Just a thought 🙂

Answer 1

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

To be precise http://api.jquery.com/toggle-event/#example-0
does exactly what you wanted…

$("#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 was removed from jQuery

Here are relevant posts

• Where has fn.toggle( handler(eventObject), handler(eventObject)…) gone?
• Toggle stopped working after jquery update