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/TreeColl         


        

Answer 1

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.setAttribute("src", "Images/Tree" + ((image.getAttribute("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 2

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"); }
);

Answer 3

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 4

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 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

Possible alternatives:

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