Jquery 在点击时交换图像

Jquery Image Swap on Click

本文关键字：交换 图像 Jquery      更新时间：2023-09-26

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

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

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

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

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

试试这个

$(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;
  });
});
相关文章：