Как я могу переключить значение src img между двумя изображениями?

Question

Я хочу переключить значение src img, чтобы в первый раз, когда я нажму на него, он изменится на другое изображение, а во второй раз он вернется к исходному изображению.

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

... но это работает еще меньше - на самом деле, это разбивает «все» все вдребезги - даже код, который необходим для запуска до к этому не выполняется сейчас ...

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

Стринер поднял трубку; это работает:

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

Это может быть не самое элегантное решение, но оно действительно работает.

Если бейсбол - игра в дюймах, программирование - это игра с символами пронзительности. Это не может быть иначе, но это тем не менее.