点击jQuery图片交换

Question

This is an image link in the HTML document that is supposed to change the image when clicked. As you can figure out, it could be one of the 2 images. Timeline-hand or hand-clicked. When someone clicks, if the src is timeline-hand it should change it to hand-clicked and vice versa.

Problem is, that it is only working once. That is, when the page loads and you click on the hand, it changes the picture the first time, but does not revert it back when you click it again.

$("document").ready(function(e) {

    $("#timeline-link").click(function(e){
        if ($("#timeline-hand").attr("src","images/timeline-hand.gif"))
        {
            $("#timeline-hand").attr("src","images/hand-clicked.gif");
        }

    else if ($("#timeline-hand").attr("src","images/hand-clicked.gif"))
        {
            $("#timeline-hand").attr("src","images/timeline-hand.gif");
        }
    });
});

Answer 1

The setter version of jQuery returns a jQuery object which is always truthy. You need to use the getter version of jQuery and then check the returned value like if ($("#timeline-hand").attr("src") == "images/timeline-hand.gif")

Or

$(function() {
  $("#timeline-link").click(function(e) {
    $("#timeline-hand").attr("src", function(i, src) {
      return src == "images/timeline-hand.gif" ? 'images/hand-clicked.gif' : "images/timeline-hand.gif";
    })
  });
});

Answer 2

$( "#target" ).toggle(function() {
     $("#timeline-hand").attr("src","images/timeline-hand.gif");
 }, function() {
     $("#timeline-hand").attr("src","images/hand-clicked.gif");
});

Answer 3

I'll see more something like this :

$("document").ready(function(e) { 
    $("#timeline-link").click(function(e){ 
        var attr = $("#timeline-hand").attr("src");
        if (attr == "images/timeline-hand.gif") { 
            $("#timeline-hand").attr("src","images/hand-clicked.gif"); 
        } else if (attr == "images/hand-clicked.gif") { 
            $("#timeline-hand").attr("src","images/timeline-hand.gif"); 
        } 
    }); 
});

Answer 4

Try this

$(document).ready(function() {     
  $('#timeline-link').click(function() {
    $('img', this).attr('src', function(i, oldSrc) {
        return oldSrc == 'images/timeline-hand.gif' ? 'images/timeline-hand.gif' : 'images/timeline-hand.gif';
    });
    return false;
  });
});