Como alterar o img ao clicar com jQuery - jquery, html, image

Eu tenho esse código que exibe pequenas imagens em uma tabela

<table>
<tr>
<td class="change" id="c1"><img src="/images/images/on.gif"/></td>
<td class="change" id="c2"><img src="/images/images/on.gif"/></td>
<td class="change" id="c3"><img src="/images/images/on.gif"/></td>
<td class="change" id="c4"><img src="/images/images/on.gif"/></td>
<td></td>
</tr>
</table>

Como posso alterar a imagem de qualquer uma das imagens na tabela no evento click. Eu tentei fazer isso, mas não consigo fazê-lo funcionar.

$(document).on("click", ".change", function() {
if (this.src == "images/on.gif")
this.src = "images/off.gif";
else
this.src = "images/on.gif";
});

Eu procurei por isso e sim eu encontrei perguntas semelhantes, mas eu realmente não consigo fazê-lo funcionar.

Respostas:

.change não é a imagem, é o pai TD:

$(function() {
$(document).on("click", ".change", function () {
var img = $(this).find("img");
img.attr("src", (img.attr("src") == "images/on.gif" ? "images/off.gif" : "images/on.gif"));
});
});

.change são os elementos da célula da tabela, não os elementos da imagem

$(document).on("click", ".change img", function () {