Come cambiare img al clic con jQuery - jquery, html, image

Ho questo codice che mostra piccole immagini in una tabella

<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>

Come posso cambiare l'immagine di una qualsiasi delle immagini nella tabella all'evento click. Ho provato a farlo ma non riesco a farlo funzionare.

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

Ho cercato questo e sì, ho trovato domande simili ma non riesco davvero a farlo funzionare.

risposte:

.change non è l'immagine, è il TD principale:

$(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 sono gli elementi delle celle della tabella, non gli elementi dell'immagine

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