Switching an image using jQuery

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

From stackoverflow

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

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

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

• Possible alternatives:

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

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

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

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

  orip : Awesome! I wasn't aware of jQuery.toggle(fn1, fn2, ...)

  Josh : Depending with how many times you're looking to call `obj`, you *might* want to just place whatever `obj` is equal to before children("img"), as that's another variable that may not need to be called. Not sure of the logic behind it, though. Your call :)

  Jeremy B. : I like! I also wasn't aware of that toggle parameter set. Thanks!

  Cros : This is a great function, but when I use it, it only toggles every other time if trigger it (I think). I have bound a function to the click event of an image, in that function i .toggle a div and I .toggle the image src, just like this. Every time I click the div is .toggle:ed but the image is only swapped every other time, at the same time that the div is shown. Any ideas?