Question

I have this code that displays small images in a table

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

How can I change the image of any one of the images in the table on click event.
I’ve tried doing this but can’t seem to get it working.

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

I’ve searched for this and yes I have found similar questions but I really can’t seem to get it working.

Answer 1

.change is not the image, it’s the parent 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'));
    });
});