changing all images src when clicking on a link

Question

I want to change all my images src by clicking on a link. (#GoList)

my original images have data informations like this :

<img class="photo_medias" data-imagefull="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/image_test_medias_1.jpg" src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/image_test_medias_1-230x118.jpg"></img>

my images are inside a div named : ".mix.photos" I have a lot of images, and the src and datas are generated by a custom field and are all different.

for the moment I tried this code :

$('#GoList').on('click', function(){
var img = $(".photo_medias").data("imagefull");
          $(".photo_medias").attr('src', ""+img+"");
});

The JS code above works, but all my images get the same src, the first image data src. I think I need to use (this), but I don't know how to do it, I tried several syntax but none of them worked...

I also have other functions inside my "$('#GoList').on('click', function()"

can anybody help me with this ?

thanks a lot,

Answer 1

that's because

var img = $(".photo_medias").data("imagefull");
$(".photo_medias").attr('src', ""+img+"");

executes once on each click and it targets all the elements with the .photo_medias class

to go through each one individually you can utilize .each() function and this reference

$('#GoList').on('click', function(){
          $(".photo_medias").each(function() {
             var img = $(this).data("imagefull");
             $(this).attr('src', ""+img+"");
          });
});