如何在两个图像之间切换 img 的 src 值？

Question

我想切换 img 的 src 值，以便我第一次单击它时，它会更改为另一个图像，第二次，它会恢复为原始图像。

img 在HTML 中是这样定义的：

<img id="imgPostTravel" name="imgPostTravel" src="/_layouts/images/TravelFormHelp/posttravelpdf.png" alt="post Travel image" height="275" width="350">

我可以用这个把第一张图片换成第二张 jQuery:

$('#imgPostTravelTopRight').click(function () {
    $('#imgPostTravelTopRight').attr('src', '/_layouts/images/TravelFormHelp/posttravelpdf.png');
});

我试过这个来切换 img src:

$('#imgPostTravelTopRight').toggle(function () {
    $('#imgPostTravelTopRight').attr('src', '/_layouts/images/TravelFormHelp/posttravelpdf.png');
}, function () {
    $('#imgPostTravelTopRight').attr('src', '/_layouts/images/TravelFormHelp/2_PTE_Top_Right_Jig.png');
});

...但它不起作用。我读到 "toggle" 已被弃用，我试过这个：

if $(('#imgPostTravelTopRight').attr('src') == '/_layouts/images/TravelFormHelp/posttravelpdf.png') {
    $('#imgPostTravelTopRight').attr('src', '/_layouts/images/TravelFormHelp/2_PTE_Top_Right_Jig.png');
} else {
    $('#imgPostTravelTopRight').attr('src', '/_layouts/images/TravelFormHelp/posttravelpdf.png');
}

...但效果更差 - 事实上，它把 "everything" 全部粉碎 - 即使是在此之前需要运行的代码也不会运行现在...

Answer 1

Stryner 搞定了；这有效：

$('#imgPostTravelTopRight').click(function () {
    if ($('#imgPostTravelTopRight').attr('src') == '/_layouts/images/TravelFormHelp/posttravelpdf.png') {
        $('#imgPostTravelTopRight').attr('src', '/_layouts/images/TravelFormHelp/2_PTE_Top_Right_Jig.png');
    } else {
        $('#imgPostTravelTopRight').attr('src', '/_layouts/images/TravelFormHelp/posttravelpdf.png');
    }
});

这可能不是最优雅的解决方案，但确实有效。

如果棒球是英寸游戏，那么编程就是小气符号游戏。不可能是别的，但就是这样。

Answer 2

您上次尝试失败的原因是语法错误：

if $(('#imgPostTravelTopRight').attr('src') == '/_layouts/images/TravelFormHelp/posttravelpdf.png') {
// ^ This should be ($( instead of $((

另一个解决方案是使用 .attr(name, function) 重载：

$('#imgPostTravelTopRight').attr("src", function(index, val) {
    return val == '/_layouts/images/TravelFormHelp/posttravelpdf.png' ?
       '/_layouts/images/TravelFormHelp/2_PTE_Top_Right_Jig.png' :
       '/_layouts/images/TravelFormHelp/posttravelpdf.png'
});

如何在两个图像之间切换 img 的 src 值？

How can I toggle an img's src value between two images?

jquery

html

image

toggle

src