Switching an image using jQuery

Question

Is there a better, more jQuery-ish way of handling this image substitution?

var image = $(obj).children("img");
if ($(image).attr("src") == "Images/TreeCollapse.gif")
   $(image).attr("src", "Images/TreeExpand.gif");
else
   $(image).attr("src", "Images/TreeCollapse.gif");

Answer 1

Not really.

I know... extremely helpful answer. What you are doing is pretty succinct and I'm not so sure there would be anything to make it more "jQueryish" as you ask.

now depending on how you are iterating through this if you are doing it to multiple image instances, that is where there might be some jQuery optimizations.

Answer 2

More jQueryish? Maybe! Clearer? I'm not sure!

var image = $(obj).children("img");
$(image).toggle(
  function () { $(image).attr("src", "Images/TreeExpand.gif");},
  function () { $(image).attr("src", "Images/TreeCollapse.gif");}
);

Answer 3

You could do something like this

e.g

$(function()
    {
       $(obj)
       .children("img")
       .attr('src', swapImage );    
    });

function swapImage(){
    return ( 
              $(this).attr('src') == "Images/TreeCollapse.gif" ?
                                     "Images/TreeExpand.gif" :
                                     "Images/TreeCollapse.gif");
}

N.B in your question you do $(image) multiple times. Its better to cache the lookup in a var e.g var $image=$(obj).children("img"); then use the $image from there on in.

Answer 4

Possible alternatives:

• Use toggleClass and put the images in stylesheet as background images.
• Use 2 images and toggle them.

Answer 5

Your image object would already be a jQUery instance so there is no need for you to pass it through $(...) again.

A good practice is to prepend variables that are jquery instances with $ and use them directly thereafter.

var $image = $(obj).children("img");
if ($image.attr("src") == "Images/TreeCollapse.gif")
   $image.attr("src", "Images/TreeExpand.gif");
else
   $image.attr("src", "Images/TreeCollapse.gif");

Answer 6

Wow. Answers come flying in, don't they? All of the above would work, but you could try this for a one-liner (it's untested)...

image.attr("src", "Images/Tree" + ((image.attr("src").indexOf("Collapse")>0) ? "Expand" : "Collapse") + ".gif");

Update: I've just tested this and it works, so would the person who voted it down care to explain why they did that?

Answer 7

Why set a variable when it isn't needed?

$(obj).children("img").toggle(
  function(){ $(this).attr("src", "Images/TreeExpand.gif"); },
  function(){ $(this).attr("src", "Images/TreeCollapse.gif"); }
);