Thomas Sebastian Thomas Sebastian - 22 days ago 9
Javascript Question

Toggle images on click using jQuery

I have two images which I need to toggle on clicking on the image.

<img id='arrowRotate' src='images/prof_arrow1.png' data-swap='images/prof_arrow.png'
data-src='images/prof_arrow1.png' />


When the user click the image the
src
should get the value of
data-swap
and when you click again the
src
should change to
data-src
. This should keep happening just like a toggle. Any help appreciated.

$("#arrowRotate").click(function() {
var swapImage = $("#arrowGrey").attr("data-swap");
$("#arrowGrey").attr({
'src': swapImage,
id: 'arrowOrange'
});
});


This is where I have got so far.

Answer

Based on my understanding from your question, Hope this is the one you expect,

$("#arrowRotate").click(function() { 
      var _this = $(this);
      var current = _this.attr("src");
      var swap = _this.attr("data-swap");     
     _this.attr('src', swap).attr("data-swap",current);   
});  

DEMO Fiddle