CODEWITHSUNDEEP
jqueryhtmlimage
user182
user182

Reputation: 1835

How to change img on click with jQuery

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.

Upvotes: 0

Views: 1015

Answers (2)

adeneo
adeneo

Reputation: 318182

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

Upvotes: 3

Explosion Pills
Explosion Pills

Reputation: 191749

.change are the table cell elements, not the image elements

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

Upvotes: 2

Related Questions