I have a bunch of GIF images on a single page. How to prevent (JQuery) action for all of them?

Question

My problem is when i try to Reload/Reset the Animated GIF so like that when you click over the static image it will play the animated image from the beginning like this:

$(this).parent().find('img.badge-item-animated-img').attr('src', src);

It is working but the action is occurring for all of the images that i have in my page.

How can i make it happen only for the one that I'm clicking?

Answer 1

You are going up from current element, then looking within that parent for all the images.... you only want to find within the current element

Change to:

/* find within "this"*/
$(this).find('img.badge-item-animated-img').attr('src', src);

Edit: clcik on jpg, change src of GIF:

$('.badge-item-img').click(function(){
   $(this).parent().next().find('img.badge-item-animated-img').attr('src',function(i,src){
         /* replace src with same vale so GIF refreshes*/
         return src;
    });
})