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

【问题标题】：How can I toggle an img's src value between two images?如何在两个图像之间切换 img 的 src 值？
【发布时间】：2015-09-25 04:51:41
【问题描述】：

我想切换一个 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');
});

...但它不起作用。我读到“切换”已被弃用，我尝试了这个：

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

...但效果更差 - 事实上，它将“一切”粉碎成碎片 - 甚至之前需要运行的代码现在也无法运行...

【问题讨论】：

Das klappt schon - 让它成为答案，我会相应地标记。
我按照建议将其转换为答案。我也尝试为其添加更多细节。希望对您有所帮助！

标签： jquery html image toggle src

【解决方案1】：

你最后一次尝试失败的原因是你有语法错误：

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

【讨论】：

【解决方案2】：

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

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

如果棒球是一种英寸游戏，那么编程就是一种挑剔的符号游戏。不可能是别的，但它就是这样。

【讨论】：