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

...但是效果更差 - 事实上，它将“一切”都打碎了 - 甚至在此之前需要运行的代码现在还没有运行......

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

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

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

如果棒球是一个英寸的游戏，编程是一个持久的符号游戏。不可能是其他情况，但不过就是这样。

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

2 个答案: