Question

这是HTML文档中的图像链接，用于在单击时更改图像。你可以弄清楚，它可能是2张图片中的一张。时间轴 - 手工或手工点击。当有人点击时，如果src是时间轴 - 它应该将其更改为手动点击，反之亦然。

问题是，它只工作一次。也就是说，当页面加载并且您单击手时，它会第一次更改图片，但是当您再次单击它时不会将其还原。

$("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

jQuery的setter版本返回一个总是真实的jQuery对象。您需要使用jQuery的getter版本，然后检查返回的值，如if ($("#timeline-hand").attr("src") == "images/timeline-hand.gif")

或者

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

我会看到更多类似的东西：

$("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

试试这个

$(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;
  });
});

Jquery图像交换点击

4 个答案: